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