webpack 本身就是爲了打包
js
所設計,作爲第一節,介紹怎麼打包js
。
1. 檢驗webpack
規範支持
webpack
支持es6
, CommonJS
, AMD
。
創建vendor
文件夾,其中minus.js
、multi.js
和sum.js
分別用 CommonJS、AMD 和 ES6 規範編寫。
在入口文件app.js
中,我們分別用 3 中規範,引用vendor
文件夾中的 js 文件。
// ES6
import sum from "./vendor/sum";
console.log("sum(1, 2) = ", sum(1, 2));
// CommonJs
var minus = require("./vendor/minus");
console.log("minus(1, 2) = ", minus(1, 2));
// AMD
require(["./vendor/multi"], function(multi) {
console.log("multi(1, 2) = ", multi(1, 2));
});
2. 編寫配置文件
webpack.config.js
是 webpack 默認的配置文件名,>>> webpack.config.js 代碼地址,其中配置如下:
const path = require("path");
module.exports = {
entry: {
app: "./app.js"
},
output: {
publicPath: __dirname + "/dist/", // js引用路徑或者CDN地址
path: path.resolve(__dirname, "dist"), // 打包文件的輸出目錄
filename: "bundle.js"
}
};
注意output.publicPath
參數,代表:js
文件內部引用其他文件的路徑。
3. 收尾
打包後的js
文件會按照我們的配置放在dist
目錄下,這時,需要創建一個html
文件,引用打包好的js
文件。
然後在 Chrome 打開(這節課只是打包js
,不包括編譯es6
),就可以看到我們代碼的運行結果了。
4. 更多
本節的代碼地址:>>> 點我進入
項目的代碼倉庫:>>> 點我進入
歡迎技術交流,引用請註明出處。
個人網站:Yuan Xin
原文鏈接:webpack4 系列教程(一): 打包JS