前面的話
本文將詳細介紹從webpack3到webpack4的升級過程
概述
相比于webpack3，webpack4可以零配置運行，打包速度比之前提高了90%，可以直接到ES6的代碼進行無用代碼剔除，新增的optimization使用簡單
在未來，CSS、HTMl和文件都會成為原生模塊
【0配置】
webpack4 設置了默認值，以便無配置啟動項目
【模塊類型】
webpack4提供了5種模塊類型
webpack 4 不僅支持本地處理 JSON，還支持對 JSON 的 Tree Shaking。當使用 ESM 語法 import json 時，webpack 會消除掉JSON Module 中未使用的導出。此外，如果要用 loader 轉換 json 為 js，需要設置 type 為 javascript/auto
模式mode
相比于webpack3，webpack4新增了一個mode配置選擇，用來表示配置模式的選擇情況
clip: initial; width: 640px; line-height: 20px; clear: both; border-left: 3px solid rgb(108, 226, 108);">module.exports = { mode: 'production'}包括生產環境production、開發環境devolopment和自定義none這三個選擇可選
【開發模式】
【生產模式】
【none】
禁用所有的默認設置
optimization
從webpack4開始官方移除了commonchunk插件，改用了optimization屬性進行更加靈活的配置，下面來介紹optimization下的一些常用配置項
【minimize】
利用unglifyjsWebpackPlugin插件來壓縮模塊，生產環境下該值默認為true
optimization: { minimize: false }【minimier】
可以使用其他插件來執行壓縮功能
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');module.exports = { //... optimization: { minimizer: [ new UglifyJsPlugin({ /* your config */ }) ] }};【splitChunks】
webpack4默認使用splitChunksPlugin插件來實現代碼分割功能，來替代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】
通過設置 runtimeChunk: true 來為每一個入口默認添加一個只包含 runtime 的 chunk
通過提供字符串值，可以使用插件的預設模式
缺省值為false，表示每個入口塊默認內嵌runtime代碼
runtimeChunk { name: "runtime" }【noEmitOnErrors】
只要在編譯時出現錯誤，就使用noEmitOnErrors屬性來跳過emit 階段，用來替代 NoEmitOnErrorsPlugin 插件
【nameModules】
使用可讀的模塊標識，方便更好的調試。webpack在開發模式下默認開啟，生產模式下默認關閉，用來替代 NamedModulesPlugin 插件
module.exports = { //... optimization: { namedModules: true }};升級
下面就基于vue-cli的項目對webpack配置進行升級
1、升級nodejs
使用 webpack4 時，必須保證 Node.js 版本 >= 8.9.4，因為 webpack4 使用了大量的ES6語法，這些語法在 nodejs新版 v8 中得到了原生支持
2、升級webpack主要部件，包括webpack、webpack-bundle-analyzer、webpack-dev-server、webpack-merge
升級的操作很簡單，先刪除，再安裝即可。但要注意的是webpack4版本中 cli 工具分離成了 webpack 核心庫 與 webpack-cli 命令行工具兩個模塊，需要使用 CLI ，必安裝 webpack-cli 至項目中
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、升級webpack相關插件，包括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、升級vue-loader
由于vue-loader升級到版本15后，配置有較多的變化，穩妥起見，可以只將vue-loader升級到14.4.2
cnpm uninstall -D vue-loadercnpm uninstall -D vue-loader@14.4.2
5、替換webpack相關插件，extract-text-webpack-plugin替換為mini-css-extract-plugin
cnpm uninstall -D extract-text-webpack-plugin
cnpm install -D mini-css-extract-plugin
配置
下面對配置文件的修改進行詳細說明：
1、webpack.base.conf.js文件
增加node:process.env.NODE_ENV即可
module.exports = {+ mode: process.env.NODE_ENV,...2、webpack.prop.conf.js文件
該文件的配置項較為復雜
（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配置項
- const UglifyJsPlugin = require('uglifyjs-webpack-plugin')...- new UglifyJsPlugin({- uglifyOptions: {- compress: {- warnings: false- }- },- sourceMap: config.build.productionSourceMap,- parallel: true- })（3）刪除CommonsChunkPlugin配置項
- 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配置項
+ 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' }+ },詳細配置移步前端小站源碼
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
