webpack3.0升级4.0

kiki.

发布于 2022-09-29 08:12:40

4340

发布于 2022-09-29 08:12:40

文章目录
1.webpack 3.11升级4.26
2. 安装/升级依赖
3. 遇到的问题
4. 总结

1.webpack 3.11升级4.26

为了提升打包效率，在webpack3.11基础之上做了升级，webpack4.0发布以来，零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，如果在项目开始使用4.0而不用vue-cli的默认配置，遇到的问题或许能少一些。

2. 安装/升级依赖

这些依赖有的是在build过程中发现依赖有新的替换或者报错，逐步替换的，如果想遇到多个坑，可以先把webpack、webpack-cli升级到对应版本 devDependencies:

"extract-text-webpack-plugin": "^4.0.0-beta.0"
"html-webpack-plugin": "^4.0.0-beta.14"
"mini-css-extract-plugin": "^0.9.0"  (旧的optimize-css-assets-webpack不支持了)
"preload-webpack-plugin": "^3.0.0-beta.4"
"script-ext-html-webpack-plugin": "^2.1.3"
"vue-loader": "^15.3.0"
"webpack": "^4.26.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.2.1"
"script-ext-html-webpack-plugin": "^2.1.3"

3. 遇到的问题

升级webpack后，build报错：ERROR in ./src/App.vue Module Error (from ./node_modules/vue-loader/lib/index.js

解决：升级vue-loader至15.3.0，

webpack.base.conf.js添加

const {VueLoaderPlugin} = require('vue-loader')
module.exports中添加
 plugins:[new VueLoaderPlugin()]

修改配置文件 webpack.prod.conf.js：

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

解决：
webpack.prod.conf.js webpackConfig配置:
optimization: {
    noEmitOnErrors: true,
    concatenateModules: true,
    splitChunks: {
      chunks: 'all',
      name: 'common',
    },
    runtimeChunk: {
      name: 'runtime'
    }
  }
webpack.prod.conf.js webpackConfig配置:  
optimization:{
    namedModules: true
  },

Plugin could not be registered at ‘html-webpack-plugin-before-html-processing’. Hook was not found.

解决：
npm i preload-webpack-plugin@next -D

Tapable.plugin is deprecated. Use new API on .hooks instead

问题：extract-text-webpack-plugin兼容问题，功能：extract css into its own file

解决：卸载extract-text-webpack-plugin，安装mini-css-extract-plugin

   new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: false,
    }),

build出错：ERROR in TypeError: Cannot read property ‘hash’ of undefined

解决:

     去掉这段
     //打包计时
     const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
     const smp = new SpeedMeasurePlugin();

WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment. You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

解决：webpackConfig添加 mode: ‘production’

Tapable.plugin is deprecated. Use new API on .hooks instead

解决：

npm i --save-dev extract-text-webpack-plugin@next

会下载到 extract-text-webpack-plugin@4.0.0-beta

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization… 解决:

去掉 webpack.optimize.CommonsChunkPlugin相关配置
webpackConfig中与plugins的同级添加

	optimization: {
	  splitChunks: {
	         cacheGroups: {
	             commons: {
	                 name: "commons",
	                 chunks: "initial",
	                 minChunks: 2
	             }
	         }
	     }
	 },

Unhandled rejection Error: “dependency” is not a valid chunk sort mode

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),

解决：chunksSortMode改为auto或者注释

至此:npm run build 正常 接下来调npm run dev，直接运行成功