webpack使用不同的js语法规范引入打包模块

编写app.js

// es module 将sum文件引入到app.js里面来
import sum from "./sum"

//common.js 语法引入minus.js文件
var minus = require('./minus')

//AMD 语法引入muti.js文件
require(['./muti'], function(muti) {
    console.log('muti(2,3) =', muti(2,3))
})


console.log('sum(23,24) = ',sum(23,24))
console.log('minu(24,17) = ',minus(24,17))

sum.js文件

// es module 导出sum文件
export default function(a,b) {
    return a + b
}

minus.js

// common.js语法 导出
module.exports = function(a,b){
    return a - b
}

muti.js

// AMD语法导出
define(function(require, factory) {
    'use strict';
    return function(a,b){
        return a * b
    }
});

index.html

webpack.config.js

// 使用common.js规范
module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        filename: '[name].[hash:5].js'
    }
}

执行打开webpack命令即可打包，但是如果webpack配置文件不叫webpack.config.js就需要执行

webpack --config webpack配置文件名    来执行打包

打开浏览器控制台验证结果