升級至webpack4.x踩坑記（熱更新局部更新失敗的問題修復）

 

零、前言

webpack升級的時候，會碰到各種個樣的問題，大多數網上都能查到解決方案最簡單的方案。

思路如下：

1、把css-loader，xxxloader等依賴都升級到最新

2、根據webpack4修改webpack.confg .js文件，要注意哪些配置廢棄，哪些配置修改移動。

3、dev環境啟動后，熱更新都是刷新頁面，而非局部刷新的問題，解決方案如下：

 

// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
  baseWebpackConfig.entry[name] = ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true'].concat(baseWebpackConfig.entry[name])
})

　　

 

 

 

根據如下的修改前后的文件對比，抓住關鍵點，基本上能解決大部分升級來的問題。

 

【坑1】-webkit-box-orient: vertical 這個屬性失效

    webpack3以上的版本中，optimize-css-assets-webpack-plugin這個插件的自身的bug，導致打包后的版本失去了-webkit-box-orient: vertical這個css樣式。

 

【解決方法】

 

 /* autoprefixer: off */
  -webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776
  /* autoprefixer: on */

 

　　

 

 

 

 

 

一、對比依賴包

 

二、webpack.config.js相關修改

 

 

注意url-loader配置方式：

 

 {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        // loader: 'url-loader',
        // options: {
        //   limit: 10000,
        //   name: utils.assetsPath('img/[name].[hash:7].[ext]')
        // }
        use: [{
          loader:'url-loader',
          options:{
              limit:8192,//限制打包圖片的大小：
              //如果大於或等於8192Byte，則按照相應的文件名和路徑打包圖片；如果小於8192Byte，則將圖片轉成base64格式的字符串。
              name: utils.assetsPath('img/[name].[hash:7].[ext]'),//images:圖片打包的文件夾；
              //[name].[ext]：設定圖片按照本來的文件名和擴展名打包，不用進行額外編碼
              //[hash:8]：一個項目中如果兩個文件夾中的圖片重名，打包圖片就會被覆蓋，加上hash值的前八位作為圖片名，可以避免重名。
          }
          }]
      },

　　

 四、css-loader配置修改對比（基於vue-cli生成的uitls文件）

五、webpack.config.js文件