vue项目升级到Webpack4

  原来的项目是用vue-cli生成的基础配置，使用的是webpack2，升级完成之后构建的速度有了大幅的提升，此次升级到webpack4的过程中还是碰到了挺多的问题，因此写一篇文章来记录一下，也希望能帮看到的人少踩一点坑。

1. vue-loader，vue-loader升级到v15之后，配置和之前相比区别还是比较大的，详细的可参考vue-loader文档，这里我列出此次升级主要涉及的几点改动：
   1）升级为v15版本后，需要配合一个plugin才能正常使用

   const VueLoaderPlugin = require('vue-loader/lib/plugin')
   module.exports = {
     plugins: [
       new VueLoaderPlugin()
     ]
   }
   

   2）对于.vue文件中的css模块<style lang="less">的处理，在v14的版本中，需要在vue-loader的配置项中去定义使用的loader,而在v15中，会把style当成一个文件处理，只需在主webpack配置项中去定义需要的loader，省下了不少配置。下面是vue-loader我在webpack.base.conf.js文件中的配置。

   rules: [
     {
       test: /\.vue$/,
       loader: 'vue-loader'
     },
     {
       test: /\.css$/,
       use: [
         process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader',
         'css-loader'
       ]
     },
     {
       test: /\.scss$/,
       use: [
         process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader',
         'css-loader',
         'sass-loader'
       ]
     }
   ]}
   

   3）另外，在生产环境中要把css单独打包成文件的话，在这里使用的是mini-css-extract-plugin，原来的extract-text-webpack-plugin目前在webpack4中似乎有点问题。

2. UglifyJsPlugin，CommonsChunkPlugin已被弃用，生产模式会自动压缩

   optimization: {
     minimize: true,
     splitChunks: {
       chunks: 'all'
     }
   }
   

3. html-webpack-plugin在dev.server.js中如下的配置需要注释掉，这段代码是在修改index.html时刷新页面的，用处不是特别大

   // force page reload when html-webpack-plugin template changes
   compiler.plugin('compilation', function (compilation) {
     compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({ action: 'reload' })
        cb()
     })
   })
   

4. 其他的plugin和loader，有报错的话只需更新到最新版本即可