概述
项目升级目标:
原版项目:vue2+webpack3+babel6
升级项目:vue2+webpack4+babel7
最近需要将vue项目升级,以获得更好的构建性能和开发便利,由于网上没有一个可以参考的实用用性文章,故此将升级项目过程记录并分享给各位,希望对各位有用。也欢迎关注本人的公众号:前端学海
根据多次尝试总结出的经验,先升级与webpack无关的组件,然后再升级webpack,注意webpack不同的版本需要的webpack-cli也不同,否则会产生兼容报错,切记!!!
最好按照一下给出的升级顺序进行,每个包后面的版本为我升级成功的包的版本,大部分是我升级时的最高稳定版,给位可以根据自己的需要,升级到指定版本。小心升级哦~
项目包的升级和卸载:
babel部分:
(1)babel-core卸载掉,从新安装@babel/core
npm un babel-core // 卸载 不然不同版本的core会发生冲突,构建失败
npm i -D @babel/core // 重新安装babel7的core
npm i -D babel-loader@8.1.0 // babel7需要babel-loader8以上的版本,否则报错
npm i -D @babel/polyfill "@babel/polyfill": "^7.10.1",
npm i -D @babel/runtime "@babel/runtime": "^7.10.2",
npm i -D @babel/plugin-transform-runtime "@babel/plugin-transform-runtime": "^7.10.1",
npm i -D @babel/preset-env "@babel/preset-env": "^7.10.2",
// 安装后,卸载不需要的babel6的相关插件,进行.babelrc 的文件配置
{
"presets": [
["@babel/env", { // babel7的写法,
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"corejs": "2", // 指定编译的corejs版本,否则构建线上环境时会报警告
"useBuiltIns": "usage"
}]
],
"plugins": ["transform-vue-jsx", "@babel/plugin-transform-runtime"]
}
// 如果编译报错:
this.setDynamic is not a function
Cannot find module '@transform-runtime/babel-plugin'
// 诸如此类,大部分均为部分配置写法未从babel6转为babel7的写法问题
到这里基本的babel的替换完成,项目启动成功
webpack部分:
注意:webpck4,需要升级其他包,否则webpack4不支持,会运行报错,如
webpack-dev-server、vue-loader 15版本以上html-webpack-plugin最新版 stylus-loader最新版
1、安装全局webpack-cli cnpm install webpack-cli -g
2、安装项目webpack-cli cnpm install --save-dev webpack-cli
3、升级webpack npm install webpack@4.43.0 -D
4、升级 webpack-dev-server cnpm install webpack-dev-server@3.1.14 -D // webpack4需要webpack-dev-server 3以上的版本,否则不兼容会报错
5、升级vue-loader cnpm install vue-loader@15.0.0 -D
6、cnpm install html-webpack-plugin@3.2.0 -D
7、安装mini-css-extract-plugin -D 替换卸载 extract-text-webpack-plugin
8、升级 stylus-loader cnpm i stylus-loader@3.0.2 -D 最新版本
修改原项目的配置,和删除废弃的插件配置:
1、utils.js
// const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl删除
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl新增
if (options.extract) {
// return ExtractTextPlugin.extract({ dl 删除
// use: loaders,
// fallback: 'vue-style-loader',
// publicPath: '../../'
// })
return [MiniCssExtractPlugin.loader].concat(loaders) // dl新增
} else {
return ['vue-style-loader'].concat(loaders)
}
2、webpack.dev.conf.js
const { VueLoaderPlugin } = require('vue-loader') // dl新增
mode: 'development', // 新增
new VueLoaderPlugin(), //dl新增
3、webpack.base.conf.js
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
exclude: /node_modules/,
options: {
limit: 10000,
publicPath: '../../', // 添加路径,否则element icon图标路径不对,打包后不显示,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
4、webpack.prod.conf
const { VueLoaderPlugin } = require('vue-loader') // dl新增
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // dl 新增
// const ExtractTextPlugin = require('extract-text-webpack-plugin') // dl 删除
mode: 'production', // 新增
optimization: { // dl新增
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: {
vendors: {
test: /[\/]node_modules[\/]/,
name: 'vendor',
chunks: 'initial',
priority: -10
}
}
}
},
plugins: [
new VueLoaderPlugin(), //dl新增
// new ExtractTextPlugin({ dl--删除
// filename: utils.assetsPath('css/[name].[contenthash].css'),
// // Setting the following option to `false` will not extract CSS from codesplit chunks.
// // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
// allChunks: true,
// }),
new MiniCssExtractPlugin({ // dl 新增
filename: utils.assetsPath('css/[name].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
}),
//--------------------dl 删除
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// minChunks (module) {
// // any required modules inside node_modules are extracted to vendor
// return (
// module.resource &&
// /.js$/.test(module.resource) &&
// module.resource.indexOf(
// path.join(__dirname, '../node_modules')
// ) === 0
// )
// }
// }),
// // extract webpack runtime and module manifest to its own file in order to
// // prevent vendor hash from being updated whenever app bundle is updated
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// minChunks: Infinity
// }),
// // This instance extracts shared chunks from code splitted chunks and bundles them
// // in a separate chunk, similar to the vendor chunk
// // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
// new webpack.optimize.CommonsChunkPlugin({
// name: 'app',
// async: 'vendor-async',
// children: true,
// minChunks: 3
// }),
]
可能会报错:
Cannot find module 'webpack-cli/bin/config-yargs'
直接删除node_modul包,重新下载即可
我的项目到这里就运行正常了,仅仅是对vue-cli脚手架的基本配置进行升级,也没有什么大的优化,只是升级,基本满足一般的项目使用,
后期开始进行逐个优化,个人建议:一定要先升级完babel,再来升级webpack, 根据我之前几次失败的折腾总结的经验。
后面一篇文章,会分享我升级后的vue项目的具体优化步骤,升级了哪些?有什么作用?效果怎样?
欢迎各位批评指正!!!
最后
以上就是寂寞小甜瓜为你收集整理的记项目升级详细记录——vue项目升级到webpack4、babel7版本的全部内容,希望文章能够帮你解决记项目升级详细记录——vue项目升级到webpack4、babel7版本所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复