记项目升级详细记录——vue项目升级到webpack4、babel7版本

项目升级目标：

原版项目：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项目的具体优化步骤，升级了哪些？有什么作用？效果怎样？

欢迎各位批评指正！！！