摘要：想要使用階段的語法需要多帶帶引用對(duì)應(yīng)的，上面的配置只加了幾個(gè)處于階段的，老項(xiàng)目建議使用升級(jí)，自動(dòng)添加依賴添加配置文件按需引入增加配置其他問題下面是我公司項(xiàng)目中遇到的問題，各位升級(jí)過程中如果遇到同樣的問題可以參考一下解決思路。

早在 2016 年我就發(fā)布過一篇關(guān)于在多頁面下使用 Webpack + Vue 的配置的文章，當(dāng)時(shí)也是我在做自己一個(gè)個(gè)人項(xiàng)目時(shí)遇到的配置問題，想到別人也可能遇到跟我同樣的問題，就把配置的思路分享出來了，傳送門在這里。

因?yàn)槟欠菖渲弥钡浆F(xiàn)在還有人在關(guān)注，同時(shí)最近公司幫助項(xiàng)目升級(jí)了 Webpack 4，趁機(jī)也把之前的配置也升級(jí)了一下，而且博客荒廢了這么久，都快 9102 年了，不能連年均一篇博文都不到，所以有了下面的分享。

下面的配置主要是給在多頁面下使用 Webpack 的同學(xué)在升級(jí) Webpack 時(shí)提供一點(diǎn)思路，多頁面的配置思路請(qǐng)點(diǎn)擊上面的傳送門。

下面代碼的地址 https://github.com/cnu4/Webpack-Vue-MultiplePage

webpack 升級(jí)

webpack-cli webapck4.x 需要新加的依賴

mini-css-extract-plugin 取代 extract-text-webpack-plugin

其他相關(guān) loader 和 plugin

css-loader

file-loader

url-loader

vue-style-loader

vue-template-compiler（注意要保持與 vue 版本一直）

html-webpack-plugin@next

設(shè)置 mode 構(gòu)建模式，比如 development 會(huì)將 process.env.NODE_ENV 的值設(shè)為 development

刪除原 extract-text-webpack-plugin 配置，增加 mini-css-extract-plugin 配置

module.exports = {
  plugins: [
    new  MiniCssExtractPlugin({
      filename:  "css/[name].css"
    }),
  ],
}

module.exports = {
  module: {
    rules: [
      {
        test:/.vue$/,
        loader: "vue-loader",
      },
      { test: /.css$/,
        use: [
          // 開發(fā)模式下使用 vue-style-loader，以便使用熱重載
          process.env.NODE_ENV !== "production" ?
            "vue-style-loader" : MiniCssExtractPlugin.loader,
          "css-loader" ] },
    ]
  }
}

這是 webpack 4 一個(gè)比較大的變動(dòng)點(diǎn)，webpack 4 中刪除了 webpack.optimize.CommonsChunkPlugin，并且使用 optimization 中的splitChunk來替代，下面的配置代替了之前的 CommonsChunkPlugin 配置，同意能提取 JS 和 CSS 文件

module.exports = {
  optimization: {
    splitChunks: {
      vendors: {
        name:  "venders",
        chunks:  "all",
        minChunks: chunks.length
    }
  }
}

vue-loader 15 注意要配合一個(gè) webpack 插件才能正確使用

const { VueLoaderPlugin } = require("vue-loader") 

module.exports = {
  plugins: [ new VueLoaderPlugin() ]
}

升級(jí)到 next，否則開發(fā)下無法正常注入資源文件

optimize-css-assets-webpack-plugin

terser-webpack-plugin

壓縮的配置也移動(dòng)到了 optimization 選項(xiàng)下，值得注意的是壓縮工具換成了 terser-webpack-plugin，這是 webpack 官方也推薦使用的，估計(jì)在 webpack 5 中會(huì)變成默認(rèn)的配置，實(shí)測(cè)打包速度確實(shí)變快了很多。

配置

module.exports = {
    minimizer: [
      new TerserPlugin({ // 壓縮js
          cache:  true,
          parallel:  true
        }
      }),
      new OptimizeCSSAssetsPlugin({ // 壓縮css
        cssProcessorOptions: {
          safe: true
        }
      })
    ]
  }
}

可以使用下面的插件看看打包時(shí)間主要耗時(shí)在哪

speed-measure-webpack-plugin

TerserPlugin 壓縮插件可以開啟多線程，見上面配置

github 的 Demo 中沒有引入，有興趣的同學(xué)可以嘗試，在一些耗時(shí)的 Loader 確實(shí)可以提高速度

vue-loader 不支持 HappyPack，官方建議用 thread-loader

const HappyPack = require("happypack");

exports.module = {
  rules: [
    {
      test: /.js$/,
      // 1) replace your original list of loaders with "happypack/loader":
      // loaders: [ "babel-loader?presets[]=es2015" ],
      use: "happypack/loader",
      include: [ /* ... */ ],
      exclude: [ /* ... */ ]
    }
  ]
};

exports.plugins = [
  // 2) create the plugin:
  new HappyPack({
    // 3) re-add the loaders you replaced above in #1:
    loaders: [ "babel-loader?presets[]=es2015" ]
  })
];

使用 DllPlugn 將 node_modules 或者自己編寫的不常變的依賴包打一個(gè) dll 包，提高速度和充分利用緩存。相當(dāng)于 splitChunks 提取了公共代碼，但 DllPlugn 是手動(dòng)指定了公共代碼，提前打包好，免去了后續(xù) webpack 構(gòu)建時(shí)的重新打包。

首先需要增加一個(gè) webpack 配置文件 webpack.dll.config.js 專門針對(duì) dll 打包配置，其中用到 webpack.DllPlugin。

執(zhí)行 webpack --config build/webpack.dll.config.js 后，webpack會(huì)自動(dòng)生成 2 個(gè)文件，其中vendor.dll.js 即合并打包后第三方模塊。另外一個(gè) vendor-mainifest.json 存儲(chǔ)各個(gè)模塊和所需公用模塊的對(duì)應(yīng)關(guān)系。

接著修改我們的 webpack 配置文件，在 plugin 配置中增加 webpack.DllReferencePlugin，配置中指定上一步生成的 json 文件，然后手動(dòng)在 html 文件中引用上一步的 vendor.dll.js 文件。

后面如果增刪 dll 中的依賴包時(shí)都需要手動(dòng)執(zhí)行上面打包命令來更新 dll 包。下面插件可以自動(dòng)完成這些操作。

安裝依賴 autodll-webpack-plugin

AutoDllPlugin 自動(dòng)同時(shí)相當(dāng)于完成了 DllReferencePlugin 和 DllPlugin 的工作，只需要在我們的 webpack 中添加配置。AutoDllPlugin 會(huì)在執(zhí)行 npm install / remove / update package-name 或改變這個(gè)插件配件時(shí)重新打包 dll。需要注意的是改變 dll 中指定的依賴包不會(huì)觸發(fā)自動(dòng)重新打包 dll。

實(shí)際打包中生成環(huán)境是沒問題的，但開發(fā)模式下在有緩存的情況下，autodll 插件不會(huì)生成新的文件，導(dǎo)致 404，所以在 Demo 中暫時(shí)關(guān)了這個(gè)插件。不過 dll 提前打包了公共文件，確實(shí)可以提高打包速度，有興趣的同學(xué)可以研究下開發(fā)模式下的緩存問題，歡迎在評(píng)論中分享。

module.exports.plugins.push(new AutoDllPlugin({
  inject: true, // will inject the DLL bundles to html
  context: path.join(__dirname, "."),
  filename: "[name].dll.js",
  debug: true,
  inherit: true,
  // path: "./",
  plugins: [
    new TerserPlugin({
      cacheL true,
      parallel: true
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ],
  entry: {
    vendor: ["vue/dist/vue.esm.js", "axios", "normalize.css"]
  }
}));

@babel/core

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-decorators

@babel/plugin-syntax-dynamic-import

@babel/plugin-transform-runtime

@babel/preset-env

@babel/runtime

babel-loader

@babel/polyfill

由于項(xiàng)目中是第一次配置 babel，一步到位直接使用新版 7，新版 babel 使用新的命名空間 @babel，如果是老項(xiàng)目升級(jí) babel 7，可以使用工具 babel-upgrade，讀一下 升級(jí)文檔

這里說下上面依賴的作用和升級(jí) babel 7 的改動(dòng)。

新版中 @babel/runtime 只包含了一些 helpers，如果需要 core-js polyfill 瀏覽器不支持的 API，可以用 transform 提供的選項(xiàng) {"corejs": 2} 并安裝依賴 @babel/runtime-corejs2。即使默認(rèn)的 polyfill 沒了，但 @babel/plugin-transform-runtime 依然可以為我們分離輔助函數(shù)，減少代碼體積

使用 @babel/runtime 的 polyfill 不會(huì)污染全局 API，因?yàn)椴粫?huì)改動(dòng)原生對(duì)象的原型，它只是創(chuàng)建一個(gè)輔助函數(shù)在當(dāng)前作用于生效，所以諸如 [1, 2].includes(1) 這樣的語法也無法被 polyfill。如果不是開發(fā)第三方庫，可以使用 @babel/polyfill，相反他的 polyfill 會(huì)影響到瀏覽器全局的對(duì)象原型

@babel/preset-env 提供了一個(gè) useBuiltIns 選項(xiàng)來按需引入 polyfill，而不需要引入全部。另一種方法是直接引用 core-js 包下的特定 polyfill。

現(xiàn)在需要手動(dòng)安裝 @babel/plugin-proposal 開頭的依賴是因?yàn)?babel 在新版中移除了 stage presets，為的是后續(xù)更好維護(hù)處于 proposal 階段的語法。想要使用 proposal 階段的語法需要多帶帶引用對(duì)應(yīng)的 plugin， 上面的配置只加了幾個(gè)處于 stage 3 階段的 plugin，老項(xiàng)目建議使用 babel-upgrade 升級(jí)，自動(dòng)添加依賴

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "targets": {
          "browsers": [
            "> 1%",
            "last 2 versions",
            "ie >= 11"
          ]
        },
        "useBuiltIns": "usage" // 按需引入 polyfill
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    ["@babel/plugin-proposal-class-properties", { "loose": false }],
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
  ]
}

module.exports = {
  modules: {
    rules: [
      {
        test:  /.js$/,
        loader:  "babel-loader",
        exclude:  /node_modules/
      }
    ]
  }
}

下面是我公司項(xiàng)目中遇到的問題，各位升級(jí)過程中如果遇到同樣的問題可以參考一下解決思路。

webpack4 內(nèi)置的json-loader 有點(diǎn)兼容性問題，安裝 json-loader 依賴和更改配置

解決：

{
  test: /.json$/,  //用于匹配loaders所處理文件拓展名的正則表達(dá)式
  use: "json-loader", //具體loader的名稱
  type: "javascript/auto",
  exclude: /node_modules/
}

vue-loader 升級(jí)到 15.x 后，會(huì)導(dǎo)致舊的 commonjs 寫法加載有問題，需要使用 require("com.vue").default 的方式引用組件

13的版本還可以設(shè)置 esModule，14 以后的版本不能設(shè)置了，vue 文件導(dǎo)出的模塊一定是 esModule

解決：使用 require("com.vue").default 或者 import 的方式引用組件

esModule option stopped working in version 14 · Issue #1172 · vuejs/vue-loader · GitHub

尤大大建議可以自己寫一個(gè) babel 插件，遇到 require vue 文件的時(shí)候自動(dòng)加上 default 屬性，這樣就不用改動(dòng)所有代碼，我們?cè)陧?xiàng)目中也是這樣處理的。

scss 中 import 的代碼不能被提取到公共 css 中。scss 中的 @import 是使用 sass-loader 處理的，處理后已經(jīng)變成 css 文件，webpack 已經(jīng)不能判斷是否是同一個(gè)模塊，所以不能提取到公共的 css 中，但多頁面中我們還是希望一些公共的 css 能被提取到公共的文件中。

解決：將需要提取到公共文件的 css 改到 js 中引入就可以，詳見下面 issue

mini-css-extract-plugin + sass-loader + splitChunks · Issue #49

mini-css-extract-plugin 的 filename 選項(xiàng)不支持函數(shù)，但我們有時(shí)候還是希望能多帶帶控制公共 css 文件的位置，而不是和其他入口文件的 css 使用一樣的目錄格式

解決：使用插件 FileManagerPlugin 在構(gòu)建后移動(dòng)文件，等 filename 支持函數(shù)后再優(yōu)化

feat: allow the option filename to be a function · Issue #143 · webpack-contrib/mini-css-extract-plugin · GitHub