详解基于Vue cli生成的Vue项目的webpack4升级
前面的话
本文将详细介绍从webpack3到webpack4的升级过程
概述
相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除,新增的optimization使用简单
在未来,CSS、HTMl和文件都会成为原生模块
【0配置】
webpack4设置了默认值,以便无配置启动项目
- entry默认值是./src/
- output.path默认值是./dist
- mode默认值是production
【模块类型】
webpack4提供了5种模块类型
- json:可通过require和import导入的JSON格式的数据(默认为.json的文件)
- webassembly:WebAssembly模块,(目前是.wasm文件的默认类型)
- javascript/auto:(webpack3中的默认类型)支持所有的JS模块系统:CommonJS、AMD。
- javascript/esm:EcmaScript模块(默认.mjs文件)。
- javascript/dynamic:仅支持CommonJS&AMD。
webpack4不仅支持本地处理JSON,还支持对JSON的TreeShaking。当使用ESM语法importjson时,webpack会消除掉JSONModule中未使用的导出。此外,如果要用loader转换json为js,需要设置type为javascript/auto
模式mode
相比于webpack3,webpack4新增了一个mode配置选择,用来表示配置模式的选择情况
module.exports={ mode:'production' }
包括生产环境production、开发环境devolopment和自定义none这三个选择可选
【开发模式】
- 浏览器调试工具
- 注释、开发阶段的详细错误日志和提示
- 快速和优化的增量构建机制
- 开启output.pathinfo在bundle中显示模块信息
- 开启NamedModulesPlugin
- 开启NoEmitOnErrorsPlugin
【生产模式】
- 启用所有优化代码的功能
- 更小的bundle大小
- 去除只在开发阶段运行的代码
- 关闭内存缓存
- Scopehoisting和Tree-shaking
- 开启NoEmitOnErrorsPlugin
- 开启ModuleConcatenationPlugin
- 开启optimization.minimize
【none】
禁用所有的默认设置
optimization
从webpack4开始官方移除了commonchunk插件,改用了optimization属性进行更加灵活的配置,下面来介绍optimization下的一些常用配置项
【minimize】
利用unglifyjsWebpackPlugin插件来压缩模块,生产环境下该值默认为true
optimization:{ minimize:false }
【minimier】
可以使用其他插件来执行压缩功能
constUglifyJsPlugin=require('uglifyjs-webpack-plugin'); module.exports={ //... optimization:{ minimizer:[ newUglifyJsPlugin({/*yourconfig*/}) ] } };
【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
通过提供字符串值,可以使用插件的预设模式
- signal:创建一个被所有生成的块共享的runtime文件
- multiple:为共同的块创建多个runtime文件
缺省值为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至项目中
cnpmuninstall-Dwebpackwebpack-bundle-analyzerwebpack-dev-serverwebpack-merge cnpminstall-Dwebpackwebpack-cliwebpack-bundle-analyzerwebpack-dev-serverwebpack-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
cnpmuninstall-Dcopy-webpack-plugincss-loadereslint-loaderfile-loaderhtml-webpack-pluginurl-loaderfriendly-errors-webpack-pluginoptimize-css-assets-webpack-pluginuglifyjs-webpack-plugin cnpminstall-Dcopy-webpack-plugincss-loadereslint-loaderfile-loaderhtml-webpack-pluginurl-loaderfriendly-errors-webpack-pluginoptimize-css-assets-webpack-pluginuglifyjs-webpack-plugin
4、升级vue-loader
由于vue-loader升级到版本15后,配置有较多的变化,稳妥起见,可以只将vue-loader升级到14.4.2
cnpmuninstall-Dvue-loader cnpmuninstall-Dvue-loader@14.4.2
5、替换webpack相关插件,extract-text-webpack-plugin替换为mini-css-extract-plugin
cnpmuninstall-Dextract-text-webpack-plugin
cnpminstall-Dmini-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
+constMiniCssExtractPlugin=require("mini-css-extract-plugin") -constExtractTextPlugin=require('extract-text-webpack-plugin') ... -newExtractTextPlugin({ +newMiniCssExtractPlugin({ filename:utils.assetsPath('css/[name].[contenthash].css'), allChunks:true, }), ...
(2)删除UglifyJsPlugin配置项
-constUglifyJsPlugin=require('uglifyjs-webpack-plugin') ... -newUglifyJsPlugin({ -uglifyOptions:{ -compress:{ -warnings:false -} -}, -sourceMap:config.build.productionSourceMap, -parallel:true -})
(3)删除CommonsChunkPlugin配置项
-newwebpack.optimize.CommonsChunkPlugin({ -name:'vendor', -minChunks(module){ -return( -module.resource&& -/\.js$/.test(module.resource)&& -module.resource.indexOf( -path.join(__dirname,'../node_modules') -)===0 -) -} -}), -newwebpack.optimize.CommonsChunkPlugin({ -name:'manifest', -minChunks:Infinity -}), -newwebpack.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'} +},
详细配置移步前端小站源码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。