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