前言

對於入門選手來講，webpack 配置項很多很重，如何快速配置一個可用於線上環境的 webpack 就是一件值得思考的事情。其實熟悉 webpack 之後會發現很簡單，基礎的配置可以分為以下幾個方面： entry 、 output 、 mode 、 resolve 、 module 、 optimization 、 plugin 、 source map 、 performance 等，本文就來重點分析下這些部分。

內有一張webpack零配置對比圖片，在公眾號後臺回覆【webpack】免費領取pdf檔案。

一、配置入口 entry

1、單入口和多入口

將原始檔加入到 webpack 構建流程，可以是單入口:

module.exports = {
 entry: `./index.js`,}

構建包名稱 [name] 為 main ；

或多入口：

module.exports = {
 entry: { 
  "index": `./index.js`,},}

key:value 鍵值對的形式：

• key：構建包名稱，即 [name] ，在這裡為 index
• value：入口路徑

入口決定 webapck 從哪個模組開始生成依賴關係圖（構建包），每一個入口檔案都對應著一個依賴關係圖。

2. 動態配置入口檔案

動態打包所有子專案

當構建專案包含多個子專案時，每次增加一個子系統都需要將入口檔案寫入 webpack 配置檔案中，其實我們讓webpack 動態獲取入口檔案，例如：

// 使用 glob 等工具使用若干萬用字元，執行時獲得 entry 的條目
module.exports = {
 entry: glob.sync('./project/**/index.js').reduce((acc,path) => {
  const entry = path.replace('/index.js','')
  acc[entry] = path
  return acc
 },{}),}

則會將所有匹配 ./project/**/index.js 的檔案作為入口檔案進行打包，如果你想要增加一個子專案，僅僅需要在 project 建立一個子專案目錄，並建立一個 index.js

這種方式比較適合入口檔案不集中且較多的場景。

動態打包某一子專案

在構建多系統應用或元件庫時，我們每次打包可能僅僅需要打包某一模組，此時，可以通過命令列的形式請求列印某一模組，例如：

npm run build --project components

在打包的時候解析命令列引數：

// 解析命令列引數
const argv = require('minimist')(process.argv.slice(2))
// 專案
const project = argv['project'] || 'index'

然後配置入口：

module.exports = {
 entry: { 
  "index": `./${project}/index.js`,} 
}

相當於：

module.exports = {
 entry: { 
  "index": `./components/index.js`,} 
}

當然，你可以傳入其它引數，也可以應用於多個地方，例如 resolve.alias 中。

二、配置出口 output

用於告知 webpack 如何構建編譯後的檔案，可以自定義輸出檔案的位置和名稱:

module.exports = {
 output: { 
  // path 必須為絕對路徑
  // 輸出檔案路徑
  path: path.resolve(__dirname,'../../dist/build'),// 包名稱
  filename: "[name].bundle.js",// 或使用函式返回名(不常用)
  // filename: (chunkData) => {
  //  return chunkData.chunk.name === 'main' ? '[name].js': '[name]/[name].js';
  // },// 塊名，公共塊名(非入口)
  chunkFilename: '[name].[chunkhash].bundle.js',// 打包生成的 index.html 檔案裡面引用資源的字首
  // 也為釋出到線上資源的 URL 字首
  // 使用的是相對路徑，預設為 ''
  publicPath: '/',}
}

在 webpack4 開發模式下，會預設啟動 output.pathinfo ，它會輸出一些額外的註釋資訊，對專案除錯非常有用，尤其是使用 eval devtool 時。

filename ： [name] 為 entry 配置的 key ，除此之外，還可以是 [id] （內部塊 id ）、 [hash] 、 [contenthash] 等。

1. 瀏覽器快取與 hash 值

對於我們開發的每一個應用，瀏覽器都會對靜態資源進行快取，如果我們更新了靜態資源，而沒有更新靜態資源名稱（或路徑），瀏覽器就可能因為快取的問題獲取不到更新的資源。在我們使用 webpack 進行打包的時候，webpack 提供了 hash 的概念，所以我們可以使用 hash 來打包。

在定義包名稱（例如 chunkFilename 、 filename ），我們一般會用到雜湊值，不同的雜湊值使用的場景不同：

hash

build-specific， 雜湊值對應每一次構建（ Compilation ），即每次編譯都不同，即使檔案內容都沒有改變，並且所有的資源都共享這一個雜湊值，此時，瀏覽器快取就沒有用了， 可以用在開發環境，生產環境不適用。

chunkhash

chunk-specific， 雜湊值對應於 webpack 每個入口點，每個入口都有自己的雜湊值。如果在某一入口檔案建立的關係依賴圖上存在檔案內容發生了變化，那麼相應入口檔案的 chunkhash 才會發生變化， 適用於生產環境

contenthash

content-specific，根據包內容計算出的雜湊值，只要包內容不變， contenthash 就不變， 適用於生產環境

但我們會發現，有時內容沒有變更，打包時 [contenthash] 反而變更了的問題，

webpack 也允許雜湊的切片。如果你寫 [hash:8] ，那麼它會獲取雜湊值的前 8 位。

注意：

• 儘量在生產環境使用雜湊
• 按需載入的塊不受 filename 影響，受 chunkFilename 影響
• 使用 hash/chunkhash/contenthash 一般會配合 html-webpack-plugin （建立 html ，並捆綁相應的打包檔案） 、 clean-webpack-plugin （清除原有打包檔案） 一起使用。

2. 打包成庫

當使用 webapck 構建一個可以被其它模組引用的庫時：

module.exports = {
 output: { 
  // path 必須為絕對路徑
  // 輸出檔案路徑
  path: path.resolve(__dirname,// 一旦設定後該 bundle 將被處理為 library
  library: 'webpackNumbers',// export 的 library 的規範，有支援 var,this,commonjs,commonjs2,amd,umd
  libraryTarget: 'umd',}
}

三、配置模式 mode（webpack4）

設定 mode ，可以讓 webpack 自動調起相應的內建優化。

module.exports = {
 // 可以是 none、development、production
 // 預設為 production
 mode: 'production'
}

或在命令列裡配置：

"build:prod": "webpack --config config/webpack.prod.config.js --mode production"

在設定了 mode 之後，webpack4 會同步配置 process.env.NODE_ENV 為 development 或 production 。

webpack4 最引人注目的主要是：

• 減小編譯時間

打包時間減小了超過 60%

• 零配置

我們可以在沒有任何配置檔案的情況下將 webpack 用於各種專案

webpack4 支援零配置使用，這裡的零配置就是指， mode 以及 entry （預設為 src/index.js ）都可以通過入口檔案指定，並且 webpack4 針對對不同的 mode 內建相應的優化策略。

1. production

配置：

// webpack.prod.config.js
module.exports = {
 mode: 'production',}

相當於預設內建了：

// webpack.prod.config.js
module.exports = {
 performance: {
  // 效能設定,檔案打包過大時，會報警告
  hints: 'warning'
 },output: {
  // 打包時，在包中不包含所屬模組的資訊的註釋
  pathinfo: false
 },optimization: {
  // 不使用可讀的模組識別符號進行除錯
  namedModules: false,// 不使用可讀的塊識別符號進行除錯
  namedChunks: false,// 設定 process.env.NODE_ENV 為 production
  nodeEnv: 'production',// 標記塊是否是其它塊的子集
  // 控制載入塊的大小（載入較大塊時，不載入其子集）
  flagIncludedChunks: true,// 標記模組的載入順序，使初始包更小
  occurrenceOrder: true,// 啟用副作用
  sideEffects: true,// 確定每個模組的使用匯出，
  // 不會為未使用的匯出生成匯出
  // 最小化的消除死程式碼
  // optimization.usedExports 收集的資訊將被其他優化或程式碼生成所使用
  usedExports: true,// 查詢模組圖中可以安全的連線到其它模組的片段
  concatenateModules: true,// SplitChunksPlugin 配置項
  splitChunks: {
   // 預設 webpack4 只會對按需載入的程式碼做分割
   chunks: 'async',// 表示在壓縮前的最小模組大小,預設值是30kb
   minSize: 30000,minRemainingSize: 0,// 旨在與HTTP/2和長期快取一起使用 
   // 它增加了請求數量以實現更好的快取
   // 它還可以用於減小檔案大小，以加快重建速度。
   maxSize: 0,// 分割一個模組之前必須共享的最小塊數
   minChunks: 1,// 按需載入時的最大並行請求數
   maxAsyncRequests: 6,// 入口的最大並行請求數
   maxInitialRequests: 4,// 界定符
   automaticNameDelimiter: '~',// 塊名最大字元數
   automaticNameMaxLength: 30,cacheGroups: { // 快取組
    vendors: {
     test: /[\\/]node_modules[\\/]/,priority: -10
    },default: {
     minChunks: 2,priority: -20,reuseExistingChunk: true
    }
   }
  },// 當打包時，遇到錯誤編譯，將不會把打包檔案輸出
  // 確保 webpack 不會輸入任何錯誤的包
  noEmitOnErrors: true,checkWasmTypes: true,// 使用 optimization.minimizer || TerserPlugin 來最小化包
  minimize: true,plugins: [
  // 使用 terser 來優化 JavaScript
  new TerserPlugin(/* ... */),// 定義環境變數
  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),// 預編譯所有模組到一個閉包中，提升程式碼在瀏覽器中的執行速度
  new webpack.optimize.ModuleConcatenationPlugin(),// 在編譯出現錯誤時，使用 NoEmitOnErrorsPlugin 來跳過輸出階段。
  // 這樣可以確保輸出資源不會包含錯誤
  new webpack.NoEmitOnErrorsPlugin()
 ]
}

2. development

配置：

// webpack.dev.config.js
module.exports = {
 mode: 'development',}

相當於預設內建了：

// webpack.dev.config.js
module.exports = {
 devtool: 'eval',cache: true,performance: {
  // 效能設定,檔案打包過大時，不報錯和警告，只做提示
  hints: false
 },output: {
  // 打包時，在包中包含所屬模組的資訊的註釋
  pathinfo: true
 },optimization: {
  // 使用可讀的模組識別符號進行除錯
  namedModules: true,// 使用可讀的塊識別符號進行除錯
  namedChunks: true,// 設定 process.env.NODE_ENV 為 development
  nodeEnv: 'development',// 不標記塊是否是其它塊的子集
  flagIncludedChunks: false,// 不標記模組的載入順序
  occurrenceOrder: false,// 不啟用副作用
  sideEffects: false,usedExports: false,concatenateModules: false,splitChunks: {
   hidePathInfo: false,minSize: 10000,maxAsyncRequests: Infinity,maxInitialRequests: Infinity,// 當打包時，遇到錯誤編譯，仍把打包檔案輸出
  noEmitOnErrors: false,checkWasmTypes: false,// 不使用 optimization.minimizer || TerserPlugin 來最小化包
  minimize: false,removeAvailableModules: false
 },plugins: [
  // 當啟用 HMR 時，使用該外掛會顯示模組的相對路徑
  // 建議用於開發環境
  new webpack.NamedModulesPlugin(),// webpack 內部維護了一個自增的 id，每個 chunk 都有一個 id。
  // 所以當增加 entry 或者其他型別 chunk 的時候，id 就會變化，
  // 導致內容沒有變化的 chunk 的 id 也發生了變化
  // NamedChunksPlugin 將內部 chunk id 對映成一個字串識別符號（模組的相對路徑）
  // 這樣 chunk id 就穩定了下來
  new webpack.NamedChunksPlugin(),// 定義環境變數
  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),]
}

3. none

不進行任何預設優化選項。

配置：

// webpack.com.config.js
module.exports = {
 mode: 'none',}

相當於預設內建了：

// webpack.com.config.js
module.exports = {
 performance: {
  // 效能設定,optimization: {
  // 不標記塊是否是其它塊的子集
  flagIncludedChunks: false,plugins: []
}

4. production、 development、none 總結

production 模式下給你更好的使用者體驗：

• 較小的輸出包體積
• 瀏覽器中更快的程式碼執行速度
• 忽略開發中的程式碼
• 不公開原始碼或檔案路徑
• 易於使用的輸出資產

development 模式會給予你最好的開發體驗：

• 瀏覽器除錯工具
• 快速增量編譯可加快開發週期
• 執行時提供有用的錯誤訊息

儘管 webpack4 在盡力讓零配置做到更多，但仍然是有限度的，大多數情況下還是需要一個配置檔案。我們可以在專案的初期使用零配置，在後期業務複雜的時候再配置。

5. 環境變數 process.env.NODE_ENV

第三方框架或庫，以及我們的業務程式碼，都會針對不同的環境配置，執行不同的邏輯程式碼，例如：

我們可以通過以下方式定義環境變數：

方法一：webpack4 中 mode: 'production' 已經預設配置了 process.env.NODE_ENV = 'production' ，所以 webapck4 可以不定義

儘管 webpack4 中定義 mode 會自動配置 process.env.NODE_ENV ，那麼我們就不需要手動配置環境變量了嗎？

其實不然， mode 只可以定義成 development 或 production ，而在專案中，我們不僅僅只有開發或生產環境，很多情況下需要配置不同的環境（例如測試環境），此時我們就需要手動配置其它環境變數（例如測試環境，就需要定義 process.env.NODE_ENV 為 'test' ），你可以採取以下方式：

方法二：webpack.DefinePlugin

// webpack編譯過程中設定全域性變數process.env
new webpack.DefinePlugin({
 'process.env': require('../config/dev.env.js')
}

config/prod.env.js ：

module.exports ={
 // 或 '"production"' ，環境變數的值需要是一個由雙引號包裹的字串
 NODE_ENV: JSON.stringify('production') 
}

方法三：webpack 命令時， NODE_ENV=development

在 window 中配置 NODE_ENV=production 可能會卡住，所以使用 cross-env：

cross-env NODE_ENV=production webpack --config webpack.config.prod.js

方法四：使用 new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPlugin 是一個通過 webpack.DefinePlugin 來設定 process.env 環境變數的快捷方式。

new webpack.EnvironmentPlugin({
 NODE_ENV: 'production',});

注意：上面其實是給 NODE_ENV 設定一個預設值 'production' ，如果其它地方有定義 process.env.NODE_ENV ，則該預設值無效。

四、配置解析策略 resolve

自定義尋找依賴模組時的策略（例如 import _ from 'lodash' ）:

module.exports = {
 resolve: {
  // 設定模組匯入規則，import/require時會直接在這些目錄找檔案
  // 可以指明存放第三方模組的絕對路徑，以減少尋找，
  // 預設 node_modules
  modules: [path.resolve(`${project}/components`),'node_modules'],// import匯入時省略字尾
  // 注意：儘可能的減少字尾嘗試的可能性
  extensions: ['.js','.jsx','.react.js','.css','.json'],// import匯入時別名，減少耗時的遞迴解析操作
  alias: {
   '@components': path.resolve(`${project}/components`),'@style': path.resolve('asset/style'),// 很多第三方庫會針對不同的環境提供幾份程式碼
  // webpack 會根據 mainFields 的配置去決定優先採用那份程式碼
  // 它會根據 webpack 配置中指定的 target 不同，預設值也會有所不同
  mainFields: ['browser','module','main'],}

五、配置解析和轉換檔案的策略 module

決定如何處理專案中不同型別的模組，通常是配置 module.rules 裡的 Loader:

module.exports = {
 module: {
  // 指明 webpack 不去解析某些內容，該方式有助於提升 webpack 的構建效能
  noParse: /jquery/,rules: [
   {
    // 這裡編譯 js、jsx
    // 注意：如果專案原始碼中沒有 jsx 檔案就不要寫 /\.jsx?$/，提升正則表示式效能
    test: /\.(js|jsx)$/,// 指定要用什麼 loader 及其相關 loader 配置
    use: {
     loader: "babel-loader",options: {
      // babel-loader 支援快取轉換出的結果，通過 cacheDirectory 選項開啟
      // 使用 cacheDirectory 選項將 babel-loader 的速度提高2倍
   		cacheDirectory: true,// Save disk space when time isn't as important
   		cacheCompression: true,compact: true,}
    },// 排除 node_modules 目錄下的檔案
    // node_modules 目錄下的檔案都是採用的 ES5 語法，沒必要再通過 Babel 去轉換
    exclude: /node_modules/
    // 也可以配置 include：需要引入的檔案
   }
  ]
 }
}

1. noParse

指明 webpack 不去解析某些內容，該方式有助於提升 webpack 的構建效能。

2. rules

常見的 loader 有：

babel-loader ：解析 .js 和 .jsx 檔案

// 配置 .babelrc
{
 "presets": [
  [
   "@babel/preset-env",],"@babel/preset-react"
 ],"plugins": [
  [
   "@babel/plugin-proposal-class-properties",{
    "loose": true
   }
  ],[
   "@babel/plugin-transform-runtime",{
    "absoluteRuntime": false,"corejs": false,"helpers": true,"regenerator": true,"useESModules": false
   }
  ],]
}

tsx-loader ：處理 ts 檔案

less-loader ：處理 less 檔案，並將其編譯為 css

sass-loader ：處理 sass、scss 檔案，並將其編譯為 css

postcss-loader：

// postcss.config.js
module.exports = { // 解析CSS檔案並且新增瀏覽器字首到 CSS 內容裡
	plugins: [require('autoprefixer')],};

css-loader ：處理 css 檔案

style-loader ：將 css 注入到 DOM

file-loader ：將檔案上的 import / require 解析為 url ，並將該檔案輸出到輸出目錄中

url-loader ：用於將檔案轉換成 base64 uri 的 webpack 載入程式

html-loader ：將 HTML 匯出為字串， 當編譯器要求時，將 HTML 最小化

更多 loaders 可檢視LOADERS 。

六、配置優化 optimization（webpack4）

webapck4 會根據你所選擇的 mode 進行優化，你可以手動配置，它將會覆蓋自動優化，詳細配置請見Optimization 。

主要涉及兩方面的優化：

• 最小化包
• 拆包

1. 最小化包

使用 optimization.removeAvailableModules 刪除已可用模組

使用 optimization.removeEmptyChunks 刪除空模組

使用 optimization.occurrenceOrder 標記模組的載入順序，使初始包更小

使用 optimization.providedExports 、 optimization.usedExports 、 concatenateModules 、 optimization.sideEffects 刪除死程式碼

使用 optimization.splitChunks 提取公共包

使用 optimization.minimizer || TerserPlugin 來最小化包

2. 拆包

當包過大時，如果我們更新一小部分的包內容，那麼整個包都需要重新載入，如果我們把這個包拆分，那麼我們僅僅需要重新載入發生內容變更的包，而不是所有包，有效的利用了快取。

拆分 node_modules

很多情況下，我們不需要手動拆分包，可以使用 optimization.splitChunks ：

const path = require('path');
module.exports = {
 entry: path.resolve(__dirname,'src/index.js'),output: {
  path: path.resolve(__dirname,'dist'),filename: '[name].[contenthash].js',optimization: {
  splitChunks: {
   // 對所有的包進行拆分
   chunks: 'all',};

我們不必制定拆包策略， chunks: all 會自動將 node_modules 中的所有內容放入一個名為 vendors〜main.js 的檔案中。

拆分業務程式碼

module.exports = {
 entry: {
  main: path.resolve(__dirname,ProductList: path.resolve(__dirname,'src/ProductList/ProductList.js'),ProductPage: path.resolve(__dirname,'src/ProductPage/ProductPage.js'),Icon: path.resolve(__dirname,'src/Icon/Icon.js'),filename: '[name].[contenthash:8].js',};

採用多入口的方式，當有業務程式碼更新時，更新相應的包即可

拆分第三方庫

const path = require('path');
const webpack = require('webpack');

module.exports = {
 entry: path.resolve(__dirname,optimization: {
  runtimeChunk: 'single',splitChunks: {
   chunks: 'all',minSize: 0,cacheGroups: {
    vendor: {
     test: /[\\/]node_modules[\\/]/,name(module) {
      // 獲取第三方包名
      const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

      // npm 軟體包名稱是 URL 安全的，但是某些伺服器不喜歡@符號
      return `npm.${packageName.replace('@','')}`;
     },};

當第三方包更新時，僅更新相應的包即可。

注意，當包太多時，瀏覽器會發起更多的請求，並且當檔案過小時，對程式碼壓縮也有影響。

動態載入

現在我們已經對包拆分的很徹底了，但以上的拆分僅僅是對瀏覽器快取方面的優化，減小首屏載入時間，實際上我們也可以使用按需載入的方式來進一步拆分，減小首屏載入時間：

import React,{ useState,useEffect } from 'react';
import './index.scss'

function Main() {
 const [NeighborPage,setNeighborPage] = useState(null)

 useEffect(() => {
  import('../neighbor').then(({ default: component }) => {
   setNeighborPage(React.createElement(component))
  });
 },[])

 return NeighborPage
  ? NeighborPage
  : <div>Loading...</div>;
}

export default Main

七、配置 plugin

配置 Plugin 去處理及優化其它的需求，

module.exports = {
 plugins: [
  // 優化 require
  new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/,/en|zh/),// 用於提升構建速度
  createHappyPlugin('happy-babel',[{
   loader: 'babel-loader',options: {
    presets: ['@babel/preset-env',"@babel/preset-react"],plugins: [
     ['@babel/plugin-proposal-class-properties',{
      loose: true
     }]
    ],// babel-loader 支援快取轉換出的結果，通過 cacheDirectory 選項開啟
    cacheDirectory: true,// Save disk space when time isn't as important
    cacheCompression: true,}
  }])
 ]
}

常用 plugins：

html-webpack-plugin ：生成 html 檔案，並將包新增到 html 中

webpack-parallel-uglify-plugin ：壓縮 js（多程序並行處理壓縮）

happypack ：多執行緒loader，用於提升構建速度

hard-source-webpack-plugin ：為模組提供中間快取步驟，顯著提高打包速度

webpack-merge ：合併 webpack 配置

mini-css-extract-plugin ：抽離 css

optimize-css-assets-webpack-plugin ：壓縮 css

add-asset-html-webpack-plugin ：將 JavaScript 或 CSS 資產新增到 html-webpack-plugin 生成的 HTML 中

更多外掛可見：plugins

八、配置devtool：source map

配置 webpack 如何生成 Source Map，用來增強除錯過程。不同的值會明顯影響到構建(build)和重新構建(rebuild)的速度：

生產環境：預設為 null ，一般不設定（ none ）或 nosources-source-map

開發環境：預設為 eval ，一般設定為 eval 、 cheap-eval-source-map 、 cheap-module-eval-source-map

策略為：

• 使用 cheap 模式可以大幅提高 souremap 生成的效率。沒有列資訊（會對映到轉換後的程式碼，而不是對映到原始程式碼），通常我們除錯並不關心列資訊，而且就算 source map 沒有列，有些瀏覽器引擎（例如 v8） 也會給出列資訊。
• 使用 eval 方式可大幅提高持續構建效率。參考官方文件提供的速度對比表格可以看到 eval 模式的編譯速度很快。
• 使用 module 可支援 babel 這種預編譯工具（在 webpack 裡做為 loader 使用）。

如果預設的 webpack minimizer 已經被重定義(例如 terser-webpack-plugin )，你必須提供 sourceMap：true 選項來啟用 source map 支援。

更多可檢視：devtool

九、配置效能 performance

當打包是出現超過特定檔案限制的資產和入口點， performance 控制 webpack 如何通知：

module.exports = {
 // 配置如何顯示效能提示
 performance: {
  // 可選 warning、error、false
  // false：效能設定,檔案打包過大時，不報錯和警告，只做提示
  // warning：顯示警告，建議用在開發環境
  // error：顯示錯誤，建議用在生產環境，防止部署太大的生產包，從而影響網頁效能
  hints: false
 }
}

十、配置其它

1. watch 與 watchOptions

watch

監視檔案更新，並在檔案更新時重新編譯：

module.export = {
 // 啟用監聽模式
 watch: true,}

在 webpack-dev-server 和 webpack-dev-middleware 中，預設啟用了監視模式。

或者我們可以在命令列裡啟動監聽（ --watch ）：

webpack --watch --config webpack.config.dev.js

watchOptions

module.export = {
 watch: true,// 自定義監視模式
 watchOptions: {
  // 排除監聽
  ignored: /node_modules/,// 監聽到變化發生後，延遲 300ms（預設） 再去執行動作，
  // 防止檔案更新太快導致重新編譯頻率太高
  aggregateTimeout: 300,// 判斷檔案是否發生變化是通過不停的去詢問系統指定檔案有沒有變化實現的
  // 預設 1000ms 詢問一次
  poll: 1000
 }
}

2. externals

排除打包時的依賴項，不納入打包範圍內，例如你專案中使用了 jquery ，並且你在 html 中引入了它，那麼在打包時就不需要再把它打包進去：

<script
 src="https://code.jquery.com/jquery-3.1.0.js"
 integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
 crossorigin="anonymous">
</script>

配置：

module.exports = {
 // 打包時排除 jquery 模組
 externals: {
  jquery: 'jQuery'
 }
};

3.target

構建目標，用於為 webpack 指定一個環境：

module.exports = {
 // 編譯為類瀏覽器環境裡可用（預設）
 target: 'web'
};

4. cache

快取生成的 webpack 模組和塊以提高構建速度。在開發模式中，快取設定為 type: 'memory' ，在生產模式中禁用。 cache: true 是 cache: {type: 'memory'} 的別名。要禁用快取傳遞 false ：

module.exports = {
 cache: false
}

在記憶體中，快取僅在監視模式下有用，並且我們假設你在開發中使用監視模式。在不進行快取的情況下，記憶體佔用空間較小。

5. name

配置的名稱，用於載入多個配置：

module.exports = {
 name: 'admin-app'
};

十一、總結

本文僅僅是列出一些常用的配置項，所有的配置檔案架構可見：https://github.com/webpack/webpack/blob/master/schemas/WebpackOptions.json，你也可以進入 webpack 官網瞭解更多。

參考：

https://webpack.js.org/

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。