webpack4 系列教程(一): 打包JS
阿新 • • 發佈:2018-07-31
func app lob blog pac exp 運行 conf github 1. 檢驗
webpack 本身就是為了打包
js
所設計,作為第一節,介紹怎麽打包js
。
1. 檢驗webpack
規範支持
webpack
支持es6
, CommonJS
, AMD
。
創建vendor
文件夾,其中minus.js
、multi.js
和sum.js
分別用 CommonJS、AMD 和 ES6 規範編寫。
>>> vendor 文件夾 代碼地址
在入口文件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
webpack4 系列教程(一): 打包JS