前面的話

本文將詳細介紹從webpack3到webpack4的升級過程

概述

相比于webpack3，webpack4可以零配置運行，打包速度比之前提高了90%，可以直接到ES6的代碼進行無用代碼剔除，新增的optimization使用簡單

在未來，CSS、HTMl和文件都會成為原生模塊

【0配置】

webpack4 設(shè)置了默認(rèn)值，以便無配置啟動項目

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

【模塊類型】

webpack4提供了5種模塊類型

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

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

模式mode

相比于webpack3，webpack4新增了一個mode配置選擇，用來表示配置模式的選擇情況

module.exports = { mode: 'production'}

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

【開發(fā)模式】

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

【生產(chǎn)模式】

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

【none】

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

optimization

從webpack4開始官方移除了commonchunk插件，改用了optimization屬性進行更加靈活的配置，下面來介紹optimization下的一些常用配置項

【minimize】

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

optimization: {  minimize: false }

【minimier】

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

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

【splitChunks】

webpack4默認(rèn)使用splitChunksPlugin插件來實現(xiàn)代碼分割功能，來替代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    }   }  } }