编写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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</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配置文件名 来执行打包
![web前端布局练手项目[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)