Webpack(含 4)配置詳解——關注細節

toBeTheLight發表於2018-05-02

前言

熟悉 webpack 與 webpack4 配置。

webpack4 相對於 3 的最主要的區別是所謂的零配置，但是為了滿足我們的專案需求還是要自己進行配置，不過我們可以使用一些 webpack 的預設值。同時 webpack 也拆成了兩部分，webpack 和 webpack-cli，都需要本地安裝。

我們通過實現一個 vue 的開發模板（vue init webpack 模板，其實跟 vue 關係不太大）來進行一次體驗。在配置過程中會盡量使用 webpack4 的相關內容。

本文不做 webpack 配置的完整介紹，著重介紹配置過程中需要注意的地方。檢視程式碼註釋閱讀效果更佳，完整配置與詳細註釋可見原始碼。配置位於 build 資料夾下。

與版本 4 相關的章節會新增符號 ④。

需要注意的一點是，我們的 webpack 程式碼是執行在node環境下的，這部分程式碼可以使用 node api，但是我們的業務程式碼（src下）是無法使用 node api 的。

基本公用配置

由於 webpack 配置中的如 context，entry（chunk入口），output（輸出）和 module.rules 中 loaders 的配置在開發模式和生產模式基本都是公用的，所以我們提取到 webpack.base.js 檔案內，供複用。其中 output 部分如下：

output: {
  
  path: path.resolve(__dirname, '../dist/'), // 資原始檔輸出時寫入的路徑
  filename: 'static/js/[name].[chunkhash].js', // 使用 chunkhash 加入檔名做檔案更新和快取處理
  chunkFilename: 'static/js/[name].[chunkhash].js'
}
複製程式碼

需要注意的有：

檔名 hash

hash 是用在檔案輸出的名字中的，如 [name].[hash].js，總的來說，webpack 提供了三種 hash：

[hash]：此次打包的所有內容的 hash。
[chunkhash]：每一個 chunk 都根據自身的內容計算而來。
[contenthash]：由 css 提取外掛提供，根據自身內容計算得來。

三種 hash 的使用，我們在優化部分再講，先優先使用 [chunkhash]。

loader 優先順序

loader 優先順序需要注意兩點，

同 test 配置內優先順序：在同一個 test 下配置多個 loader ，優先處理的 loader 放在配置陣列的後面，如對 less 處理，則：

{
  test: /\.less$/,
  use: [
    'style-loader', 
    'css-loader', 
    'postcss-loader', 
    'less-loader'
  ]
}
複製程式碼

不同 test 內優先順序：如對 js 檔案的處理需要兩個 test 分別配置，使用 eslint-loader 和 babel-loader ，但是又不能配置在一個配置物件內，可使用 enforce: 'pre' 強調優先順序，由 eslint-loader 優先處理。
```
{
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
},
{
  test: /\.js$/,
  loader: 'babel-loader'
}
複製程式碼
```

css 前處理器配置

我們以 less 檔案的 loader 配置 ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader']，使用 @import url(demo.less)為例:

less-loader 先處理 less 語法
postcss-loader 進行字首新增等其他處理
css-loader 將內容引入 @import 所在的 css 檔案內
vue-style-loader 將生成 style 標籤，將 css 內容插入 HTML

vue-style-loader 功能類似 style-loader

但是由於 vue 中的單檔案元件，又分為兩種情況：

.vue 檔案內的 style：
vue-loader 會對 .vue 單檔案元件進行處理，對 .vue 單檔案元件內的各種 lang="type" 我們可以在 vue-loader 的 options 配置不同的 loader，由於 vue-loader 內建了 postcss 對 css 進行處理，所以此處我們不需要再配置 postcss-loader
```
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      less: ['// xxx-loaders'],
      scss: ['// xxx-loaders'],
    }
  }
}
複製程式碼
```
js 直接引入中引入樣式檔案：
如 main.js 中 import 'demo.less'，這種方式引入的樣式檔案，在 vue-loader 處理範圍置之外，所以仍然需要配置 postcss-loader。

由於這種差異我們將對 css 前處理器檔案的配置封裝為函式，由 usePostCss 引數生成對應配置，將檔案放入 utils.js 檔案內，將 vue-loader 配置放在 vue-loader.js 檔案內。

也就是對 css 前處理器的配置我們需要在 vue-loader 內和 webpack 內配置兩遍。

寫這篇 README.md 期間 vue-loader 釋出了 v15 版，需要配合外掛使用，不用再進行兩遍配置

postcss-loader

postcss-loader 是一個強大的 css 處理工具，我們將 postcss 的配置拆分出去，新建 postcss.config.js 配置檔案

module.exports = {
  plugins: {
    // 處理 @import
    'postcss-import': {},
    // 處理 css 中 url
    'postcss-url': {},
    // 自動字首
    'autoprefixer': {
      "browsers": [
        "> 1%",
        "last 2 versions"
      ]
    }
  }
}
複製程式碼

除了註釋中列出的需要的功能外掛，我們還可能會用到 nextcss（新的css語法的處理），px2rem/px-to-viewport 移動端適配相關的外掛。

babel-loader

我們使用 babel 編譯瀏覽器不能識別的 js、類 js 語法，如轉義 ES6+、JSX等。同樣將 babel-loader 的配置拆分出去，需要建立 .babelrc 並配置：

{
  "presets": [
    [
      /* *
       *  babel-preset-env
       *  可以根據配置的目標執行環境自動啟用需要的 babel 外掛。
       */
      "env", {
        "modules": false, // 關閉 babel 對 es module 的處理
        "targets": { // 目標執行環境
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }
    ]
  ],
  "plugins": [
    "syntax-dynamic-import" // 非同步載入語法編譯外掛
  ]
}
複製程式碼

媒體資源 loader

我們還需要對圖片、視訊、字型等檔案進行 loader 配置，以字型檔案為例子，主要用到的是 url-loader：

{
  /**
   * 末尾 \?.* 匹配帶 ? 資源路徑
   * 我們引入的第三方 css 字型樣式對字型的引用路徑中可能帶查詢字串的版本資訊
   */
  test: /\.(woff2|woff|eot|ttf|otf)(\?.*)?$/,
  /**
   * url-loader
   * 會配合 webpack 對資源引入路徑進行復寫，如將 css 提取成獨立檔案，可能出現 404 錯誤可檢視 提取 js 中的 css 部分解決
   * 會以 webpack 的輸出路徑為基本路徑，以 name 配置進行具體輸出
   * limit 單位為 byte，小於這個大小的檔案會編譯為 base64 寫進 js 或 html
   */
  loader: 'url-loader',
  options: {
    limit: 10000,
    name: 'static/fonts/[name].[hash:7].[ext]',
  }
}
複製程式碼

靜態檔案拷貝

直接引用（絕對路徑）和程式碼執行時確定的資源路徑應該是以靜態檔案存在的，這些資原始檔不會經過 webpack 編譯處理，所以我們將它們放在獨立的資料夾（如 static）中，並在程式碼打包後拷貝到我們的輸出目錄，我們使用 copy-webpack-plugin 自動完成這個工作：

const CopyWebpackPlugin = require('copy-webpack-plugin')

// 在開發模式下，會將檔案寫入記憶體
new CopyWebpackPlugin([
  {
    from: path.resolve(__dirname, '../static'),
    to: 'static',
    ignore: ['.*']
  }
])
複製程式碼

此外掛在拷貝檔案過多時會崩潰，不知道解決了沒有。

生產模式 production

我們先進行生產模式的配置。

新增 script 指令碼命令

在 package.json 下新增

"scripts": {
  "build": "node build/build.js"`
}
複製程式碼

那麼使用 npm run build 命令就可執行 node build/build.js，我們不直接使用 webpack webpack.prod.config.js 命令去執行配置檔案，而是在 build.js 中，做一些檔案刪除的處理，再啟動 webpack。

建立 build.js 邏輯

主要是兩個工作，引入 rimraf 模組刪除 webpack 下之前產生的指定檔案，啟動 webpack，並在不同階段給出不同的提示資訊。

// 在第一行設定當前為 生產環境
process.env.NODE_ENV = 'production'

const webpack = require('webpack')
const rm = require('rimraf')
const webpackConfig = require('./webpack.prod')
// 刪除 webpack 輸出目錄下的內容，也可只刪除子檔案如 static 等
rm(webpackConfig.output.path, err => {
  // webpack 按照生產模式配置啟動
  webpack(webpackConfig, (err, stats) => {
    // 輸出一些狀態資訊
  })
}
複製程式碼

更多細節見原始碼註釋。

生產模式配置檔案

新建 webpack.prod.js 檔案，使用

const merge = require('webpack-merge') // 專用合併 webpack 配置的包
const webpackBaseConfig = require('./webpack.base')
module.exports = merge(webpackBaseConfig, {
  // 生產模式配置
})
複製程式碼

合併基本配置和生產模式獨有配置，然後我們開始進行生產模式下的 webpack 的配置資訊的填寫。

④ mode 預設

這是 webpack4 的新 api ，有三個預設值：development，production，none，我們在生產模式選用mode: 'production'，webpack4在此配置下預設啟用了：

外掛
- FlagDependencyUsagePlugin：應該是刪除無用程式碼的，其他外掛依賴
- FlagIncludedChunksPlugin：應該是刪除無用程式碼的，其他外掛依賴
- ModuleConcatenationPlugin：作用域提升 webpack3的scope hosting
- NoEmitOnErrorsPlugin：遇到錯誤程式碼不跳出
- OccurrenceOrderPlugin
- SideEffectsFlagPlugin
- UglifyJsPlugin：js程式碼壓縮
- process.env.NODE_ENV 的值設為 production

所以這些預設啟用的內容我們不需要再配置。

最後一點設定 process.env.NODE_ENV 的值設為 production 其實是使用 DefinePlugin 外掛：

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production") 
})
複製程式碼

從而我們可以在業務程式碼中通過 process.env.NODE_ENV，如進行判斷，使用開發介面還是線上介面。如果我們需要在 webpack 中判斷當前環境，還需要單獨的設定 process.env.NODE_ENV = 'production'，這也是我們在 build.js 中第一行做的事情。

新增 webpack 打出的 bundles 到 HTML 檔案

我們使用 webpack 配置入口時只能配置 js 檔案作為入口，webpack 打出的 bundles 並不能自動與我們專案的 HTML 檔案發生關聯。
需要我們手動新增<script src="./bundles.js"></script>（還可能包括後面提取出來的 css 檔案）到 HTML 檔案。
我們可以使用 html-webpack-plugin 外掛自動完成這個工作。
當僅使用 webpack 對 js 進行打包，而沒有 HTML檔案需求時，不需要這一步。

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
  new HtmlWebpackPlugin({
    filename: path.join(__dirname, '../dist/index.html'),// 檔案寫入路徑
    template: path.join(__dirname, '../src/index.html'),// 模板檔案路徑
    inject: true // js 等 bundles 插入 html 的位置 head/body等
  })
]
複製程式碼

如果不對 HtmlWebpackPlugin 進行配置，則其會建立一個 HTML 檔案，其中 filename 在開發模式下還是比較重要的。

④ 提取 js 中的 css 部分到單獨的檔案

使用過 webpack3 的同學應該對 extract-text-webpack-plugin 外掛（以舊外掛代稱）比較熟悉，為了嘗試webpack4，我並不想使用這個外掛的 @next 版本，所以選擇了新的替代外掛 mini-css-extract-plugin（以新外掛代稱）。
與舊外掛相同，同樣需要在 webpack 的 loader 部分和 plugin 部分都進行配置，不同的是新外掛提供了單獨的 loader，在 loader 部分與舊外掛的配置方式不太相同。配置如下：

loader 部分

```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// ...
[
  {
    loader: MiniCssExtractPlugin.loader,
    options: {
    /*
    * 複寫 css 檔案中資源路徑
    * webpack3.x 配置在 extract-text-webpack-plugin 外掛中
    * 因為 css 檔案中的外鏈是相對與 css 的，
    * 我們抽離的 css 檔案在可能會單獨放在 css 資料夾內
    * 引用其他如 img/a.png 會定址錯誤
    * 這種情況下所以單獨需要配置 ../，複寫其中資源的路徑
    */
    publicPath: '../' 
  },
  {
    loader: 'css-loader',
    options: {}
  },
  {
    loader: 'less-loader',
    options: {}
  }
]
```
複製程式碼

plugin 部分

```js
new MiniCssExtractPlugin({
  // 輸出到單獨的 css 資料夾下
  filename: "static/css/[name].[chunkhash].css"
})
```
複製程式碼

可以看到這個 loader 也配置在了 css 前處理器部分，在前面我們已經把 css 前處理器的配置提取到了 utils.js 檔案的函式內，所以這裡也是，我們使用 extract 引數決定是否需要提取。

回憶一下，之前使用的 style-loader 或 vue-style-loader 的作用，它們會建立標籤將 css 的內容直接插入到 HTML中。而提取成獨立的 css 檔案之後，插入到 HTML 的工作由 html-webpack-plugin 外掛完成，兩者職責的這部分職責是重複的，所以我們需要使用 extract 引數做類似如下處理：

if (options.extract) {
  return [MiniCssExtractPlugin.loader, ...otherLoaders]
} else {
  return ['vue-style-loader', ...otherLoaders]
}
複製程式碼

④ 拆分 js 程式碼

這是 webpack 配置中很重要的一個環節，影響到我們使用瀏覽器快取的合理性，影響頁面資源的載入速度，將 js 進行合理拆分，可以有效減小我們每次更新程式碼影響到的檔案範圍。
使用過 webpack3 的同學一定清楚，我們一般會提取出這麼幾個檔案 manifest.js（webpack 執行時，即webpack解析其他bundle的程式碼等）、vendor.js（node_modules內的庫）、app.js（真正的專案業務程式碼）。在 webpack3 中我們使用 webpack.optimize.CommonsChunkPlugin外掛進行提取，webpack4 中我們可以直接使用 optimization 配置項進行配置（當然仍可使用外掛配置）：

/**
 * 優化部分包括程式碼拆分
 * 且執行時（manifest）的程式碼拆分提取為了獨立的 runtimeChunk 配置 
 */
optimization: {
  splitChunks: {
    chunks: "all",
    cacheGroups: {
      // 提取 node_modules 中程式碼
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        chunks: "all"
      },
      commons: {
        // async 設定提取非同步程式碼中的公用程式碼
        chunks: "async"
        name: 'commons-async',
        /**
         * minSize 預設為 30000
         * 想要使程式碼拆分真的按照我們的設定來
         * 需要減小 minSize
         */
        minSize: 0,
        // 至少為兩個 chunks 的公用程式碼
        minChunks: 2
      }
    }
  },
  /**
   * 對應原來的 minchunks: Infinity
   * 提取 webpack 執行時程式碼
   * 直接置為 true 或設定 name
   */
  runtimeChunk: {
    name: 'manifest'
  }
}
複製程式碼

也可將不會變的開發依賴配置到單獨的entry中，如：

entry: {
  app: 'index.js',
  vendor2: ['vue', 'vue-router', 'axios']
}
複製程式碼

開發模式 development

開發模式與生產模式的不同是，在開發時會頻繁執行程式碼，所以很多東西在開發模式是不推薦配置的，如css檔案提取，程式碼壓縮等。所以針對一些寫入公共配置檔案，但是開發模式不需要的功能，我們需要做類似修改：process.env.NODE_ENV === 'production' ? true : false，如 css 預處理中是否需要配置提取 loader MiniCssExtractPlugin.loader。此外還有一些是隻配置在生產模式下的，如 MiniCssExtractPlugin 和 js 程式碼拆分優化。

開發模式我們需要一個開發服務，幫我們完成實時更新、介面代理等功能。我們使用 webpack-dev-server。需要 npm 安裝。

新增 script 指令碼命令

同樣，在 package.json 下新增

"scripts": {
  "dev": "webpack-dev-server --config ./build/webpack.dev.js"
}
複製程式碼

使用 --config 指定配置檔案，由於命令直接呼叫 webpack-dev-server 執行，所以我們直接寫配置就好，可以不像生產模式一樣去編寫呼叫邏輯。

開發模式配置檔案

新建 webpack.dev.js 檔案，同樣使用：

// 在第一行設定當前環境為開發環境
process.env.NODE_ENV = 'development'
const merge = require('webpack-merge') // 專用合併webpack配置的包
const webpackBaseConfig = require('./webpack.base')
module.exports = merge(webpackBaseConfig, {
  // 開發模式配置
})
複製程式碼

④ mode 預設

同樣，在開發模式下我們可以將 mode 配置為 development，同樣預設啟用了一些功能：

外掛
- NamedChunksPlugin：使用 entry 名做 chunk 標識
- NamedModulesPlugin：使用模組的相對路徑非自增 id 做模組標識
process.env.NODE_ENV 的值設為 development

開發服務配置 devServer

文件

devServer: {
  clientLogLevel: 'warning',
  inline: true,
  // 啟動熱更新
  hot: true,
  // 在頁面上全屏輸出報錯資訊
  overlay: {
    warnings: true,
    errors: true
  },
  // 顯示 webpack 構建進度
  progress: true,
  // dev-server 服務路徑
  contentBase: false,
  compress: true,
  host: 'localhost',
  port: '8080',
  // 自動開啟瀏覽器
  open: true,
  // 可以進行介面代理配置
  proxy： xxx,
  // 跟 friendly-errors-webpack-plugin 外掛配合
  quiet: true,
  publicPath: '/'
}
複製程式碼

其他外掛

devServer 使用熱更新 hot 時需要使用外掛：

plugins: [
  new webpack.HotModuleReplacementPlugin()
]
複製程式碼

優化 webpack 輸出資訊，需要配置：

const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
plugins: [
  new FriendlyErrorsPlugin()
]
複製程式碼

注意事項

熱更新：在使用熱更新時，我們的 chunk 名中不能使用 [hash] 做標識，檔名變化無法熱更新，所以需要將原來配置在公共配置中的 output 中的檔名配置分別寫入生產和開發模式配置中，開發模式去掉 [hash]
```
filename: 'static/[name].js', 
chunkFilename: 'static/[id].js'
複製程式碼
```
HtmlWebpackPlugin：在生產模式下，我們將 html 檔案寫入到 dist 下，但是在開發模式下，並沒有實際的寫入過程，且 devServer 啟動後的服務內容與 contentBase 有關，兩者需要一致，所以我們將 HtmlWebpackPlugin 的配置也分為生產和開發模式，開發模式下使用：
```
new HtmlWebpackPlugin({
  filename: 'index.html', // 檔案寫入路徑，前面的路徑與 devServer 中 contentBase 對應
  template: path.resolve(__dirname, '../src/index.html'),// 模板檔案路徑
  inject: true
})
複製程式碼
```

優化

配置提取

開發模式和生產模式的一些功能啟用，如 css 是否提取。
路徑配置，如檔案輸出路徑和檔名、output 中的 publicPath（程式碼 output 中只配置了 path，沒配置 publicPath，將這部分路徑的 static 寫到了各個資源的輸出name中，可參考Webpack中publicPath詳解）、服務配置如埠等。

我們可以提取到獨立的 config 檔案中（本程式碼沒做）。

拆分 js 程式碼

在生產模式的 拆分 js 程式碼 部分我們已經講了如何拆分，那麼為了更好的分析我們的拆分是否合理，我們可以配置一個 bundle 組成分析的外掛。

const BundleAnalyzer = require('webpack-bundle-analyzer')
plugins: [
  new BundleAnalyzer.BundleAnalyzerPlugin()
]
複製程式碼

hash 固化

我們使用檔名中的 hash 變化來進行資原始檔的更新，那麼合理利用快取時，就要求我們合理的拆分檔案，在內容更新時最小限度的影響檔名中的 hash。這裡就用到了[hash]，[chunkhash]，[contenthash]。然而 webpack 對 hash 的預設處理並不盡如人意，這一部分的優化可以參考基於 webpack 的持久化快取方案

多頁面

多頁面配置程式碼位於 muilt-pages 分支。我們只需做少量修改，以目前有 entry 頁和 index 頁為例。

entry 改動

將兩個頁面的 js 入口都配置在 webpack 的 entry中：

entry: {
  /**
    * 入口，chunkname: 路徑
    * 多入口可配置多個
    */
  main: './src/main.js',
  entry: './src/entry.js'
}
複製程式碼

也可以自己設定專案結構，使用 node api 動態讀取的方式獲取目前的多頁面入口。

HtmlWebpackPlugin 改動

需按照頁面個數配置多個 HtmlWebpackPlugin：

new HtmlWebpackPlugin({
  filename: path.join(__dirname, '../dist/main.html'),// 檔案寫入路徑
  template: path.join(__dirname, '../src/index.html'),// 模板檔案路徑
  inject: true, // 插入位置
  chunks: ['manifest', 'vendors', 'common', 'main']
}),
new HtmlWebpackPlugin({
  filename: path.join(__dirname, '../dist/entry.html'),// 檔案寫入路徑
  template: path.join(__dirname, '../src/index.html'),// 模板檔案路徑
  inject: true, // 插入位置
  chunks: ['manifest', 'vendors', 'common', 'entry']
}),
複製程式碼

其中需手動指定每個頁面的插入的 chunks（同步的），否則會將其他頁面的檔案也一同插入當前頁面。

④ 公共js提取

在單頁面下，一般不存在提取非非同步 js 檔案的公共程式碼（非 node_modules）的問題，在多頁面下我們的頁面間可能會公用 api、配置等檔案，此時可以增加：

'common': {
  // initial 設定提取同步程式碼中的公用程式碼
  chunks: 'initial',
  // test: 'xxxx', 也可使用 test 選擇提取哪些 chunks 裡的程式碼
  name: 'common',
  minSize: 0,
  minChunks: 2
}
複製程式碼

提取同步程式碼中的公用程式碼

參考

webpack4配置詳解之慢嚼細嚥
2019-03-03
Web
webpack4.x最詳細入門講解
2018-10-29
Web
webpack4配置詳解之常用外掛分享
2018-11-19
Web
監聽配置細節引數詳解兩則
2021-03-23
webpack（2）——配置項詳解
2019-03-02
Web
過度抽象和關注細節的弊端 (轉)
2007-12-13
抽象
史上最詳細的webpack 講解3 （webpack.base.conf.js基礎配置）
2017-04-21
WebJS
webpack4-05-配置vue相關
2019-05-10
WebVue
Webpack安裝配置及打包詳細過程
2020-11-10
Web
乾貨！擼一個webpack外掛(內含tapable詳解+webpack流程)
2019-03-04
Web
nginx 詳解 – 詳細配置說明
2019-03-04
Nginx
nginx 詳解 - 詳細配置說明
2018-11-29
Nginx
webpack loader配置全流程詳解
2019-09-25
Web
Nginx，Charles與Webpack配置前端API代理教程(超詳細)
2018-10-07
NginxWeb前端API
Webpack4系列教程(二) HTML相關配置
2018-12-21
WebHTML
Webpack4系列教程(三) JS相關配置
2018-12-21
WebJS
Webpack4系列教程(四) CSS相關配置
2018-12-22
WebCSS
3、Spring4之Bean 配置的細節
2014-11-09
SpringBean
Nginx location配置詳細解釋
2017-05-17
Nginx
生命週期詳細解讀（含部分原始碼）
2019-05-14
原始碼
java 數字金字塔,含詳細解說
2020-12-11
Java
macOS版本大升級，這幾項的細節值得你關注
2020-11-21
Mac
在釋出站點前，Web開發者需要關注哪些技術細節？
2014-05-19
Web
在釋出站點前 Web開發者需要關注哪些技術細節？
2014-05-19
Web
開發 web 桌面類程式幾個必須關注的細節
2013-09-17
Web
Webpack4系列教程(五) 圖片相關配置
2018-12-24
Web
詳談webpack4
2019-04-12
Web
BAT面試必問細節：關於Netty中的ByteBuf詳解
2021-11-13
BAT面試Netty
Struts配置檔案詳細講解
2008-04-11
webpack詳解
2018-03-10
Web
前端神器—Google Chrome Devtools細節詳解
2018-08-14
前端GoChromedev
Java集合詳解8：Java集合類細節精講，細節決定成敗
2019-11-07
Java
web.xml配置詳解4
2011-06-02
WebXML
log4j配置詳解
2007-08-31
Webpack 打包 Javascript 詳細介紹
2021-12-06
WebJavaScript
webpack4-基礎配置
2019-02-14
Web
webpack4基礎配置
2018-08-28
Web
Webpack 4 配置最佳實踐
2018-06-25
Web

Webpack(含 4)配置詳解——關注細節

前言

基本公用配置

檔名 hash

loader 優先順序

css 前處理器配置

postcss-loader

babel-loader

媒體資源 loader

靜態檔案拷貝

生產模式 production

新增 script 指令碼命令

建立 build.js 邏輯

生產模式配置檔案

④ mode 預設

新增 webpack 打出的 bundles 到 HTML 檔案

④ 提取 js 中的 css 部分到單獨的檔案

④ 拆分 js 程式碼

開發模式 development

新增 script 指令碼命令

開發模式配置檔案

④ mode 預設

開發服務配置 devServer

其他外掛

注意事項

優化

配置提取

拆分 js 程式碼

hash 固化

多頁面

entry 改動

HtmlWebpackPlugin 改動

④ 公共js提取

參考

相關文章