webpack4升级记录

【各配置文件版本】

// package.json
{
    "babel-polyfill": "^6.26.0",
     "vue-loader": "^15.7.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-plugin-syntax-jsx": "6.18.0",
     "babel-plugin-transform-runtime": "6.23.0",
     "babel-plugin-syntax-jsx": "6.18.0",
     "eslint-loader": "^2.1.2",
     "file-loader": "^3.0.1",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "vue-loader": "^14.2.4",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.8",
     "webpack": "^4.29.6",
     "copy-webpack-plugin": "^5.0.0",
     "svg-sprite-loader": "^3.9.2",
}

1）"svg-sprite-loader": "3.2.4" -> "svg-sprite-loader": "^3.9.2"

svg-sprite-loader用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，如下报错将svg-sprite-loader升级至3.9.2即可。

ERROR in ./components/icons/tick.svg
Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js):
TypeError: Cannot read property 'target' of undefined
   at Object.loader (/Users/jbures/srv/gogcom/website4/frontend/frontpage/node_modules/svg-sprite-loader/lib/loader.js:39:46)
@ ./components/regularBanner/regularBanner.component.ts 3:0-27

2）extract-text-webpack-plugin与mini-css-extract-plugin 

extract-text-webpack-plugin插件的作用是将css样式抽离成单独的css文件，webpack4不再支持extract-text-webpack-plugin，推荐使用mini-css-extract-plugin。

mini-css-extract-plugin对比extract-text-webpack-plugin的特点：

                1、异步加载

                 2、不重复编译，性能更好

                 3、更容易使用

                 4、只针对css

                 5、针对每一个包含css的文件都会创建一个单独的css文件

• 修改utils.js

  // var ExtractTextPlugin = require('extract-text-webpack-plugin') 替换为
  var MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  if (options.extract) {
    // return ExtractTextPlugin.extract({
    //   use: loaders,
    //   fallback: 'vue-style-loader'
    // }) 替换为
    return [MiniCssExtractPlugin.loader].concat(loaders)
  } else {
    return ['vue-style-loader'].concat(loaders)
  }

   

• 修改webpack.prod.config.js

  // var ExtractTextPlugin = require('extract-text-webpack-plugin') 替换为
  var MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  plugins：[
      // new ExtractTextPlugin({
      //   filename: utils.assetsPath('css/[name].[contenthash].css')
      // }) 替换为
      new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css') })
  ]

  mini-css-extract-plugin插件会对css文件的引入顺序有要求，比方说在a.vue文件中引入b.css、c.css，在d.vue文件中引入c.css、b.css， 不止针对css文件，包含css样式的vue文件的引入顺序冲突也会出现如下报错， 打包的时候就会报如下警告：

  WARNING in chunk 22 [mini-css-extract-plugin]
  Conflicting order between:
   * css ./node_modules/_css-loader@0.28.0@css-loader?{"minimize":true,"sourceMap":false}!./node_modules/_vue-loader@14.2.4@vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-15df3d06","scoped":true,"sourceMap":false}!./node_modules/_sass-loader@6.0.5@sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/_vue-loader@14.2.4@vue-loader/lib/selector.js?type=styles&index=0!./src/components/listSelect/index.vue
   * css ./node_modules/_css-loader@0.28.0@css-loader?{"minimize":true,"sourceMap":false}!./node_modules/_vue-loader@14.2.4@vue-loader/lib/style-compiler?{"optionsId":"0","vue":true,"id":"data-v-627ff558","scoped":true,"sourceMap":false}!./node_modules/_sass-loader@6.0.5@sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/_vue-loader@14.2.4@vue-loader/lib/selector.js?type=styles&index=0!./src/components/trailSelect/index.vue

  解决方法：
  1、手动调整css或vue文件的引入顺序
  2、 由于文件的引入顺序并不影响最终的打包，且项目中组件引入场景较多，无法保证引入顺序不冲突，故可以忽略该警告，本文选择第二种解决方案，具体如下：
    webpack.pro.conf.js：

  const FilterWarningsPlugin = require('webpack-filter-warnings-plugin')
  
  plugins：[
      // 此处省略其他配置
  
      new FilterWarningsPlugin({
        exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
      })
  ]

 

3）webpack4删除了webpack.optimize.CommonsChunkPlugin，使用使用splitChunks替代

webpack.optimize.CommonsChunkPlugin用于提取公共代码

报错如下：

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

解决方法：

webpack.prod.config.js

plugins: [
    // 省略此处配置
],
optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.(sa|sc|c)ss$/,  // 正则规则验证，如果符合就提取 chunk
          chunks: 'all', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
          enforce: true,
        },
        commons: {
            test: /[\\/]node_modules[\\/]/,
            name: "vendor",
            chunks: "all"
        }
      },
    }
  }

 4）webpack.optimize.UglifyJsPlugin被移除，使用uglifyjs-webpack-plugin来压缩js

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

解决方法： 

webpack.pro.conf.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
optimization: {
  // 此处省略其他配置
  minimizer: [
    new UglifyJsPlugin({
        uglifyOptions: {
          compress: false
        }
      })
  ]
}

 5）循环依赖报错，报错信息如下：

Processed static/css/325.0e4338761429b4eb16ac.css, before: 1, after: 0, ratio: 0%
Processed static/css/styles.ea60487387cdbc986ac3.css, before: 325821, after: 271165, ratio: 83.23%
(node:2817) UnhandledPromiseRejectionWarning: Error: Cyclic dependency
    at visit (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_toposort@1.0.7@toposort/index.js:35:13)
    at visit (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_toposort@1.0.7@toposort/index.js:53:9)
    at visit (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_toposort@1.0.7@toposort/index.js:53:9)
    at Function.toposort [as array] (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_toposort@1.0.7@toposort/index.js:22:22)
    at Object.module.exports.dependency (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/lib/chunksorter.js:50:35)
    at HtmlWebpackPlugin.sortChunks (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/index.js:364:35)
    at /Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_html-webpack-plugin@3.2.0@html-webpack-plugin/index.js:113:21
    at _next0 (eval at create (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_tapable@1.1.3@tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at _err0 (eval at create (/Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_tapable@1.1.3@tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:1)
    at /Users/yee/zhProject/XueZhiYun-OrgAdmin/node_modules/_optimize-css-assets-webpack-plugin@1.3.0@optimize-css-assets-webpack-plugin/index.js:95:46
    at process._tickCallback (internal/process/next_tick.js:68:7)
(node:2817) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 6)
(node:2817) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠙ building for production...

解决方法：设置chunksSortMode: 'none'，即不按引入顺序排序
                   webpack.pro.conf.js:

plugins: [
// 此处省略其他配置
    new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    path: config.build.assetsPublicPath + config.build.assetsSubDirectory,
    chunksSortMode: 'none',
    cdn: config.build.cdn,
    })
]

6）增加mode属性，mode: 'none' | 'production' | 'development' 

webpack.pro.conf.js

mode: 'production'

 webpack.dev.conf.js

mode: 'development'

 7）修改.babelrc文件

{
    "presets": [
        ["env", 
        {
           "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
     }],
    "stage-2"
    ],
    "plugins":["transform-vue-jsx", "transform-runtime"]
}