Webpack概念

liuyongjia發表於2019-07-27
Web

webpack概念

我經常用 webpack，打算做一次比較詳細的概念清點和梳理。從 0 配置 webpack，由於 webpack5（2019.07.27）暫時還沒有釋出。並且從Webpack Milestones上來看，截止到 7 月 27 日，完成度是 64%。有喜歡鑽研的同學可以去研究一下 5，我的重點還是當前 4.X。

Hello World

由於是概念清點，先從最基礎的開始。

mkdir webpack-test
cd webpack-test
npm init -y
npm i --save-dev webpack

接下來，新建一個src目錄，建立index.js，然後在package.json的scripts下加入

"scripts": {
    "webpack": "webpack"
}

接著在當前目錄啟動終端，輸入

npm run webpack

這個時候就能看到webpack把src入口的index.js打包到dist目錄下的main.js。

由於parcle宣傳約定先於配置的火爆，webpack在 4.X 中也加入了預設配置，即如果沒有webpack.config.js或者沒有配置入口entry，則預設為src/index.js。同理，預設的輸出outputs 是dist/main.js。

核心概念

webpack有五個概念需要了解。

entry

entry用來告訴webpack應該從哪個 JS 檔案開始去尋找相關依賴，並且把它們打包成一個或者多個 bundle，最終輸出到指定目錄。預設值為./src/index.js，可以有多個 entry。常用的配置如下：

// 單檔案
module.exports = {
  entry: "./src/file1.js"
};
// 單檔案陣列，不常用，預設打到一個檔案中
module.exports = {
  entry: ["./src/file1.js", "./src/file2.js"]
};
// 將輸出
// dist
// └── main.js
// 多檔案物件，常用，會分entry入口打包，輸出檔名為entry配置的key
module.exports = {
  entry: {
    file1: "./src/file1.js",
    file22: "./src/file2.js"
  }
};
// 將輸出
// dist
// ├── file1.js
// └── file22.js

output

output就是用來指定把 bundle 輸出到哪裡的配置，預設值為./dist。
output有兩個配置項：

  1. filename
    filename 用於配置輸出檔案的檔名
  2. path
    輸出檔案的絕對路徑
// 預設配置
const path = require("path");
module.exports = {
  output: {
    filename: "main.js",
    path: path.join(__dirname, "dist")
  }
};

如果有多個入口，則可以使用佔位符來指定檔名，或者新增 hash 等。

module.exports = {
  output: {
    filename: "[name].[hash:16].js",
    path: path.join(__dirname, "dist")
  }
};

loader

loader主要用來預處理各種檔案。比如我們常用的babel-loader，css-loader。
在使用之前，需要先安裝

npm install --save-dev css-loader style-loader
npm install --save-dev babel-loader @babel/core @babel/preset-env

為檔案加入loader配置

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }
};

plugin

外掛機制給webpack提供了更多自定義的能力。webpack的plugin具有apply方法，並且會在webpack編譯時呼叫，通過在plugin物件中對webpack提供的各種hook做操作，達到我們修改bundle的目的。

官網的一個例子：

const pluginName = "ConsoleLogOnBuildWebpackPlugin";

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, compilation => {
      console.log("webpack 構建過程開始！");
    });
  }
}

mode

mode比較簡單，通常來說，有兩種內建mode，development和production，可以通過webpack.config.js配置，或者通過CLI引數傳遞。

module.exports = {
  mode: "production"
};
webpack --mode=production

設定了mode之後，nodejs程式中的process.env.NODE_ENV也會被同步設定。
webpack對於mode有一些自己的區分，在production模式下，會開啟程式碼壓縮、去除一些熱更新的程式碼等，在生產環境中切記要將mode設定為production。

相關文章