Vue项目从webpack3.x升级webpack4不完全指南
前段时间，泡面将自己的一个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不完全指南，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的
相关文章
这篇文章主要介绍了利用Vue.js框架实现火车票查询系统的相关资料,，文中给出了详细的介绍与示例代码，并在文章结尾给出了完整的项目下载，需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
vue 2 实现自定义组件一到多个v-model双向数据绑定的方法(最新推荐)
有时候我们需要对一个组件绑定自定义 v-model,以更方便地实现双向数据,例如自定义表单输入控件,这篇文章主要介绍了vue 2 实现自定义组件一到多个v-model双向数据绑定的方法,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了关于element ui 表格中的常见特殊属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
ElementUI中el-dropdown-item点击事件无效问题
这篇文章主要介绍了ElementUI中el-dropdown-item点击事件无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
详解element-ui级联菜单（城市三级联动菜单）和回显问题
这篇文章主要介绍了详解element-ui级联菜单（城市三级联动菜单）和回显问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Vue.js项目在IE11白屏报错的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
本文介绍了在Vue3中如何利用生命周期钩子函数和定时器实现访问页面时自动获取数据的方法,这种方法适用于需要在页面加载时即时更新数据显示的场景,感兴趣的可以了解一下2024-11-11
本篇文章主要介绍了详解vue嵌套路由-query传递参数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
uni-app中App与webview双向实时通信详细代码示例
在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于uni-app中App与webview双向实时通信的相关资料,需要的朋友可以参考下2024-07-07
最新评论