vue项目升级到Webpack4

作者: 勤奋的大鱼 | 来源:发表于2018-07-16 20:44 被阅读3次

      原来的项目是用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,有报错的话只需更新到最新版本即可

    相关文章

      网友评论

        本文标题:vue项目升级到Webpack4

        本文链接:https://www.haomeiwen.com/subject/ykilpftx.html