前面的話

本文將詳細(xì)介紹從webpack3到webpack4的升級(jí)過(guò)程

概述

相比于webpack3，webpack4可以零配置運(yùn)行，打包速度比之前提高了90%，可以直接到ES6的代碼進(jìn)行無(wú)用代碼剔除，新增的optimization使用簡(jiǎn)單

在未來(lái)，CSS、HTMl和文件都會(huì)成為原生模塊

【0配置】

webpack4 設(shè)置了默認(rèn)值，以便無(wú)配置啟動(dòng)項(xiàng)目

1. entry 默認(rèn)值是 ./src/
2. output.path 默認(rèn)值是 ./dist
3. mode 默認(rèn)值是 production

【模塊類型】

webpack4提供了5種模塊類型

1. json: 可通過(guò) require 和 import 導(dǎo)入的 JSON 格式的數(shù)據(jù)(默認(rèn)為 .json 的文件)
2. webassembly: WebAssembly 模塊，（目前是 .wasm 文件的默認(rèn)類型）
3. javascript/auto: (webpack 3中的默認(rèn)類型)支持所有的JS模塊系統(tǒng)：CommonJS、AMD。
4. javascript/esm: EcmaScript模塊（默認(rèn) .mjs 文件）。
5. javascript/dynamic: 僅支持 CommonJS & AMD。

webpack 4 不僅支持本地處理 JSON，還支持對(duì) JSON 的 Tree Shaking。當(dāng)使用 ESM 語(yǔ)法 import json 時(shí)，webpack 會(huì)消除掉JSON Module 中未使用的導(dǎo)出。此外，如果要用 loader 轉(zhuǎn)換 json 為 js，需要設(shè)置 type 為 javascript/auto

模式mode

相比于webpack3，webpack4新增了一個(gè)mode配置選擇，用來(lái)表示配置模式的選擇情況

module.exports = { mode: 'production'}

包括生產(chǎn)環(huán)境production、開發(fā)環(huán)境devolopment和自定義none這三個(gè)選擇可選

【開發(fā)模式】

1. 瀏覽器調(diào)試工具
2. 注釋、開發(fā)階段的詳細(xì)錯(cuò)誤日志和提示
3. 快速和優(yōu)化的增量構(gòu)建機(jī)制
4. 開啟 output.pathinfo 在 bundle 中顯示模塊信息
5. 開啟 NamedModulesPlugin
6. 開啟 NoEmitOnErrorsPlugin

【生產(chǎn)模式】

1. 啟用所有優(yōu)化代碼的功能
2. 更小的bundle大小
3. 去除只在開發(fā)階段運(yùn)行的代碼
4. 關(guān)閉內(nèi)存緩存
5. Scope hoisting 和 Tree-shaking
6. 開啟 NoEmitOnErrorsPlugin
7. 開啟 ModuleConcatenationPlugin
8. 開啟 optimization.minimize

【none】

禁用所有的默認(rèn)設(shè)置

optimization

從webpack4開始官方移除了commonchunk插件，改用了optimization屬性進(jìn)行更加靈活的配置，下面來(lái)介紹optimization下的一些常用配置項(xiàng)

【minimize】

利用unglifyjsWebpackPlugin插件來(lái)壓縮模塊，生產(chǎn)環(huán)境下該值默認(rèn)為true

optimization: {  minimize: false }

【minimier】

可以使用其他插件來(lái)執(zhí)行壓縮功能

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = { //... optimization: {  minimizer: [   new UglifyJsPlugin({ /* your config */ })  ] }};

【splitChunks】

webpack4默認(rèn)使用splitChunksPlugin插件來(lái)實(shí)現(xiàn)代碼分割功能，來(lái)替代webpack3中的commonChunksPlugin插件

module.exports = { //... optimization: {  splitChunks: {   chunks: 'async',   minSize: 30000,   minChunks: 1,   maxAsyncRequests: 5,   maxInitialRequests: 3,   automaticNameDelimiter: '~',   name: true,   cacheGroups: {    vendors: {     test: /[///]node_modules[///]/,     priority: -10    },    default: {     minChunks: 2,     priority: -20,     reuseExistingChunk: true    }   }  } }

【runtimeChunk】

通過(guò)設(shè)置 runtimeChunk: true 來(lái)為每一個(gè)入口默認(rèn)添加一個(gè)只包含 runtime 的 chunk

通過(guò)提供字符串值，可以使用插件的預(yù)設(shè)模式

1. signal: 創(chuàng)建一個(gè)被所有生成的塊共享的runtime文件
2. multiple: 為共同的塊創(chuàng)建多個(gè)runtime文件

缺省值為false，表示每個(gè)入口塊默認(rèn)內(nèi)嵌runtime代碼

runtimeChunk {   name: "runtime"  }

【noEmitOnErrors】

只要在編譯時(shí)出現(xiàn)錯(cuò)誤，就使用noEmitOnErrors屬性來(lái)跳過(guò)emit 階段，用來(lái)替代 NoEmitOnErrorsPlugin 插件

【nameModules】

使用可讀的模塊標(biāo)識(shí)，方便更好的調(diào)試。webpack在開發(fā)模式下默認(rèn)開啟，生產(chǎn)模式下默認(rèn)關(guān)閉，用來(lái)替代 NamedModulesPlugin 插件

module.exports = { //... optimization: {  namedModules: true }};

升級(jí)

下面就基于vue-cli的項(xiàng)目對(duì)webpack配置進(jìn)行升級(jí)

1、升級(jí)nodejs

使用 webpack4 時(shí)，必須保證 Node.js 版本 >= 8.9.4，因?yàn)?webpack4 使用了大量的ES6語(yǔ)法，這些語(yǔ)法在 nodejs新版 v8 中得到了原生支持

2、升級(jí)webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge

升級(jí)的操作很簡(jiǎn)單，先刪除，再安裝即可。但要注意的是webpack4版本中 cli 工具分離成了 webpack 核心庫(kù) 與  webpack-cli 命令行工具兩個(gè)模塊，需要使用  CLI ，必安裝  webpack-cli 至項(xiàng)目中

cnpm uninstall -D webpack webpack-bundle-analyzer webpack-dev-server webpack-mergecnpm install -D webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge

3、升級(jí)webpack相關(guān)插件，包括copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin

cnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugincnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

4、升級(jí)vue-loader

由于vue-loader升級(jí)到版本15后，配置有較多的變化，穩(wěn)妥起見，可以只將vue-loader升級(jí)到14.4.2

cnpm uninstall -D vue-loadercnpm uninstall -D vue-loader@14.4.2

5、替換webpack相關(guān)插件，extract-text-webpack-plugin替換為mini-css-extract-plugin

cnpm uninstall -D extract-text-webpack-plugin

cnpm install -D mini-css-extract-plugin

配置

下面對(duì)配置文件的修改進(jìn)行詳細(xì)說(shuō)明：

1、webpack.base.conf.js文件

增加node:process.env.NODE_ENV即可

module.exports = {+ mode: process.env.NODE_ENV,...

2、webpack.prop.conf.js文件

該文件的配置項(xiàng)較為復(fù)雜

（1）將ExtractTextPlugin替換為MiniCssExtraPlugin

+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")- const ExtractTextPlugin = require('extract-text-webpack-plugin')...-  new ExtractTextPlugin({+  new MiniCssExtractPlugin({   filename: utils.assetsPath('css/[name].[contenthash].css'),   allChunks: true,  }),...

（2）刪除UglifyJsPlugin配置項(xiàng)

- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')...- new UglifyJsPlugin({-   uglifyOptions: {-    compress: {-     warnings: false-    }-   },-   sourceMap: config.build.productionSourceMap,-   parallel: true- })

（3）刪除CommonsChunkPlugin配置項(xiàng)

- new webpack.optimize.CommonsChunkPlugin({-   name: 'vendor',-   minChunks (module) {-    return (-     module.resource &&-     //.js$/.test(module.resource) &&-     module.resource.indexOf(-      path.join(__dirname, '../node_modules')-     ) === 0-    )-   }-  }),-  new webpack.optimize.CommonsChunkPlugin({-   name: 'manifest',-   minChunks: Infinity-  }),-  new webpack.optimize.CommonsChunkPlugin({-   name: 'app',-   async: 'vendor-async',-   children: true,-   minChunks: 3-  }), ...

（4）添加optimization配置項(xiàng)

+ optimization: {+  splitChunks: {+   chunks: 'async',+   minSize: 30000,+   minChunks: 1,+   maxAsyncRequests: 5,+   maxInitialRequests: 3,+   automaticNameDelimiter: '~',+   name: true,+   cacheGroups: {+    vendors: {+     test: /[///]node_modules[///]/,+     priority: -10+    },+    default: {+     minChunks: 2,+     priority: -20,+     reuseExistingChunk: true+    }+   }+  },+  runtimeChunk: { name: 'runtime' }+ },

詳細(xì)配置移步前端小站源碼

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。