原来的项目是用vue-cli生成的基础配置,使用的是webpack2,升级完成之后构建的速度有了大幅的提升,此次升级到webpack4的过程中还是碰到了挺多的问题,因此写一篇文章来记录一下,也希望能帮看到的人少踩一点坑。
-
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中似乎有点问题。
-
UglifyJsPlugin,CommonsChunkPlugin已被弃用,生产模式会自动压缩
optimization: { minimize: true, splitChunks: { chunks: 'all' } }
-
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() }) })
-
其他的plugin和loader,有报错的话只需更新到最新版本即可
网友评论