編寫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=)