之前看到各大公众号都在狂推 webpack 新版发布的相关内容,之前就尝试了升级,由于部分插件的原因,未能成功,现在想必过了这么久已经可以了,今天就来试一下在我的项目中升级会遇到哪些坑。
创新互联专注于大柴旦企业网站建设,成都响应式网站建设,商城系统网站开发。大柴旦网站建设公司,为大柴旦等地区提供建站服务。全流程按需网站开发,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务
查阅更新日志
在安装更新之前,先大致浏览了一下更新日志,对大部分用户来说迁移上需要注意的应该就是这些点:
- 在命令行界面运行打包指令需要安装
webpack-cli
; - 打包需要指定打包模式
production
ordevelopment
,在不同模式下会添加不同的默认配置,webpack.DefinePlugin
插件的process.env.NODE_ENV
的值不需要再定义,将根据模式自动添加; - 不再需要在
plugin
中设置new webpack.optimize.UglifyJsPlugin
,只需要在配置中设置开关即可,并且production
模式自动开启,可以通过optimization.minimizer
指定其他压缩库; - 删除了
CommonsChunkPlugin
,功能已迁移至optimization.splitChunks ,
optimization.runtimeChunk
。
迁移
- 安装最新的
webpack
、webpack-cli
、webpack-dev-server
; - 为开发中和发布分别配置
mode
,删除webpack.DefinePlugin
配置,并且去掉package.json
中启动脚本的NODE_ENV
区别环境变量定义; - 去掉
new webpack.optimize.UglifyJsPlugin
、ModuleConcatenationPlugin
配置。
爬坑
在这些配置好之后我遇到的第一个问题就是打包时 extract-text-webpack-plugin
插件炸了!这里提供了这里有两种解决方案:
- 方法一:安装指定
extract-text-webpack-plugin
版本@next
; - 方法二:使用
mini-css-extract-plugin
替代。
如果使用方法二注意在发布打包时需要指定 css 压缩库配置,并且需要同时写入 js 压缩库,因为你一旦指定了 optimization.minimizer
就会弃用内置的代码压缩:
/* webpack.config.js */ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = () => { const config = { module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader' ] }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader', 'less-loader' ] } ] }, resolve: { extensions: ['.js', '.jsx', '.less'] } }; if (process.env.NODE_ENV === 'development') { config.module.rules[0].use = [ 'css-hot-loader', MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader' ]; config.module.rules[1].use = [ 'css-hot-loader', MiniCssExtractPlugin.loader, 'css-loader?importLoaders=1', 'postcss-loader', { loader: 'less-loader', options: { modifyVars: theme } } ]; } return config; }; /* webpack.config.prod.js */ const merge = require('webpack-merge'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const webpackBaseConfig = require('./webpack.config')(); module.exports = merge(webpackBaseConfig, { mode: 'production', optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, uglifyOptions: { compress: { warnings: false, drop_debugger: true, drop_console: false } } }), new OptimizeCSSAssetsPlugin({}) ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].css' }) ] });
happypack
炸了,小场面,升级就好 @5.0.0-beta.3
(happypack
和 extract-text-webpack-plugin
搭配使用更佳,mini-css-extract-plugin
未测试)。webpack-browser-plugin
炸了,小场面,弃用就好,然后在 devServer
中配置 open
和 openPage
。
上面的配置中可以看到我使用判断语句 process.env.NODE_ENV === 'development'
在开发配置中加入了 css-hot-loader
,但是这里实际上是获取到的是 undefined
,咦?这是什么鬼?查阅更新日志是怎么说的:
process.env.NODE_ENV
are set to production or development (only in built code, not in config)
意思就是说我们在使用的工程项目代码中会获取到这个变量,但是打包配置中使用这个变量还是获取不到的,我也实际验证了这个结果,so,我在 package.json
的开发启动脚本中还是加上了 NODE_ENV='development'
。
最后
总体来说现在的升级时机已经成熟,大多需要用到的功能和插件都有平滑的升级或替代方案,建议在开始升级前安装最新发布的插件版本,也可以参考下我的项目配置react-with-mobx-template。
还有对插件的一些 API 也做了一些更改,如果你是插件开发者也可以尝试发布新的插件版本,我在使用自己的版本号提取插件webpack-version-plugin时发现 compiler.plugin
已经被提示过气了, webpack@v4
使用最新的 compiler.hooks.emit.tap
触发事件,嗯,最后的这部分广告真硬!
当前标题:webpack@v4升级踩坑(小结)
文章链接:http://scyingshan.cn/article/ghodih.html