JavaScript

超轻量级php框架startmvc

Vue项目从webpack3.x升级webpack4不完全指南

更新时间:2020-08-24 05:24:01 作者:startmvc
前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出

前段时间,泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本,现在才拉出来记录一下,已备忘之用,也和大家分享一下,以免大家采坑。

原先的环境

  • 项目原先通过Vue-cli 2.9.3 版本构建,原先使用的webpack 3.x版本
  • 首先需要对基础包进行更新(package.json)
  • webpack 更新到4.x版本,泡面这里更新到了4.28.3
  • 更新webpack-dev-server,泡面更新到了3.1.14版本,
  • 安装webpack-cli,泡面安装的是3.2.1版本

除了上面的这几个,还需要更新下面几个:

  • vue-loader 泡面直接升级到了15版本,
  • eslint-loader 升级到了1.7.1,这个当时在做启动的时候提示了一些错误,所以索性也就升级了.
  • happypack, 泡面使用了多线程加速,所以这个也必须要升级,否则会报错,泡面更新到了5.0.1
  • html-webpack-plugin, 这个也需要更新,否则会提示错误,泡面这里升级到了3.2.0

除了上面几个,还需要额外下载一个:

  • mini-css-extract-plugin, 该包是要替换掉extract-text-webpack-plugin来使用,所以后者就遗弃掉了.

接着我们修改一下webpack.base.conf.js,没有使用happypack的这步骤可略过...

泡面这里不知道为什么不能使用happypack来挂载vue-loader,否则会提示错误,所以泡面这里将原先的happypack的配置修改回了原先:


...
const vueLoaderConfig = require('./vue-loader.conf')
...
module.exports = {
 ...
 {
 test: /\.vue$/,
 // loader: 'happypack/loader?id=happy-vue'
 loader: 'vue-loader',
 options: vueLoaderConfig
 },
 ... 
}

接着来调整 webpack.dev.conf.js

首先在合并配置的地方引入mode


 ...
 // 开发环境引入
 mode: 'development',
 ...
 module: {
 ...
 }
 devServer: {
 ...
 }

webpack4需要手动引入vue-loader插件,因为泡面是从14版本升级到15版本,点我查看官方文档,如何从 v14 迁移,所以这里需要引入:


...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
module.export = {
 ...
 plugins: [
 ...
 // 引入vue-loader插件
 new VueLoaderPlugin(),
 ...
 // 同时,泡面注释掉了vue-loader的happypack
 // new Happypack({
 // id: 'happy-vue',
 // loaders: [{
 // loader: 'vue-loader',
 // options: vueLoaderConfig
 // }]
 // })
 ]
}

接着, 以下插件被废弃掉了,直接注释掉

  • webpack.DefinePlugin
  • webpack.NamedModulesPlugin
  • webpack.NoEmitOnErrorsPlugin

ok, 这个文件就改完了.

接着来修改webpack.prod.conf.js

同开发环境,需要引入mode和vue-loader,一模一样,所以这里不赘述了.

接着,我们需要在配置表里添加optimization选项:


...
output: { ...},
// 这里添加
optimization: {
 runtimeChunk: {
 name: 'manifest'
 },
 minimizer: [
 new UglifyJsPlugin({
 cache: true,
 parallel: true,
 sourceMap: config.build.productionSourceMap,
 uglifyOptions: {
 warnings: false
 }
 }),
 new OptimizeCSSPlugin({
 cssProcessorOptions: config.build.productionSourceMap
 ? { safe: true, map: { inline: false } }
 : { safe: true }
 }),
 ],
 splitChunks:{
 chunks: 'async',
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: false,
 cacheGroups: {
 vendor: {
 name: 'vendor',
 chunks: 'initial',
 priority: -10,
 reuseExistingChunk: false,
 test: /node_modules\/(.*)\.js/
 },
 styles: {
 name: 'styles',
 test: /\.(scss|css)$/,
 chunks: 'all',
 minChunks: 1,
 reuseExistingChunk: true,
 enforce: true
 }
 }
 }
 },
 plugins: [...] 

接着,我们需要引入mini-css-extract-plugin插件,并添加到插件里:


...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
 ...
 new MiniCssExtractPlugin({
 filename: utils.assetsPath('css/[name].[contenthash].css')
 }),
 ... 
]

然后, 我们需要把废弃掉的插件注释掉:


webpack.DefinePlugin
UglifyJsPlugin (放到optimization里了)
ExtractTextPlugin
OptimizeCSSPlugin (放到optimization里了)
CommonsChunkPlugin (所有的...)

ok, 至此该文件就调整完了.

最后一个utils.js

这里主要是需要添加mini-css-extract-plugin插件


...
// 注释掉原来的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: "vue-style-loader",
// publicPath: '../../'
// });
// 改为:
return [MiniCssExtractPlugin.loader].concat(loaders)

ok, 大功告成! 至此webpack4的配置文件就全部修改完成了.

目前, 泡面至在此记录流水账,回头性能测试再发文章记录.

ps: 如果出现这种错误

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

请重新安装一下 vue-template-compiler

总结

以上所述是小编给大家介绍的Vue项目从webpack3.x升级webpack4不完全指南,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的