webpack4 系列教程(一): 打包JS

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