webpack使用不同的js語法規範引入打包模組
阿新 • • 發佈：2018-11-07
編寫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配置檔名 來執行打包
開啟瀏覽器控制檯驗證結果
