受不了了，webpack3.x升级到webpack4.x

背景

陈旧项目将node-sass迁移成sass有样式问题，可能是webpack版本的问题，就干脆直接升级得了

首先升级

webpack3.x -> webapck4.x

webpack-dev-server2.x -> webpack-dev-server3.x

删除不推荐的配置

根据官网迁移文档，删除已经不推荐的插件

同时将CommonsChunkPlugin替换为optimization.splitChunks

升级html-webpack-plugin

升级了webpack版本之后执行打包构建命令，出现下面报错，是由于html-webpack-plugin版本错误导致的，所以将其升级到3.2.0版本

extract-text-webpack-plugin更换为mini-css-extract-plugin

再次运行打包命令，出现下面报错，官网并没有明确说出要将这个包更换掉，所以就没换

到mini-css-extract-plugin更新日志查看，2.0以上的版本需要webpack5.x

所以使用1.6.2版本

js 复制代码

 // 更换前
 if (options.extract) {
     return ExtractTextPlugin.extract({
         use: loaders,
         fallback: 'vue-style-loader',
         publicPath: '../../'
     })
 } else {
     return ['vue-style-loader'].concat(loaders)
 }
 // 后
 if (options.extract) {
     const extractLoader = {
         loader: MiniCssExtractPlugin.loader,
         options: {
             publicPath: '../../'
         }
     }
     return [extractLoader].concat(loaders)
 } else {
     return ['vue-style-loader'].concat(loaders)
 }

运行测试

进行上述操作已成功构建出文件，现在让后端帮忙测试

菜单加载出来了说明是没有问题的，只是一个配置上的问题，通过查看后端的index文件，发现了环境变量的缺失

原先的打包文件，不管是js还是css文件都是以固定名称存在的，所以不需要对index文件做替换，现在名称会随之变换了，所以需要进行一下修改

打包后的index文件的输出路径要改成templates下的index

js 复制代码

 build: {
     // Template for index.html
     index: path.resolve(__dirname, '../../templates/index.html')
 }

模板文件需要将templates文件复制一份到当前路径下，并将原先的js文件和css文件的引入删除

js 复制代码

 new HtmlWebpackPlugin({
     filename: config.build.index,
     template: 'index.prod.html'
 })

重新打包，然后出现下列问题

查看控制台报错

发现图标库的路径有问题，少走了一层

单独对图标库文件处理

js 复制代码

 {
     test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
         loader: 'url-loader',
         options: {
             publicPath: '../../../',
             limit: 10000,
             name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
 }

重新打包，成功运行