webpack3.0升級4.0

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
    
    會下載到 [email protected]
    
  • Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…
    解決:

    1. 去掉 webpack.optimize.CommonsChunkPlugin相關配置
    2. 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,直接運行成功

4. 總結

開啓cache的情況下,原來打包時間22s左右,現在build最快8s左右
升級思路:

  1. 卸載webpack舊版本、安裝新版本webpack, webpack-cli
  2. 遇到loader、plugin報錯,升級loader、plugin,有的在4.0不支持,需要換成新的
  3. 卸載 ExtractTextPlugin、刪除對應配置,改用 mini-css-extract-plugin
  4. 配置環境mode
  5. 其它wenpack3.0優化配置兼容處理
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章