vue-cli2升级webpack4
1， 优先升级webpack和 webpack-cli
"npm i webpack@latest webpack-cli --save-dev"
然后运行 npm run dev 运行之后报错
因为webpack-dev-server版本与新的webpack不匹配 升级该插件
升级之后运行
新版的webpack4已经摒弃了CommonsChunkPlugin方法进行第三方库与公共模块的提取
所以在开发运行时要去掉
在webpack.base.conf.js(构建，开发公共配置文件中去掉插件)
2， 然后更新依赖
"npm install extract-text-webpack-plugin@latest html-webpack-plugin@latest inject-loader@latest webpack-dev-middleware@latest"
更新loaders以及一些plugins 都升级到最近版本
//loaders "npm install webpack-bundle-analyzer@latest vue-template-compiler@latest webpack-merge@latest friendly-errors-webpack-plugin@latest copy-webpack-plugin@latest optimize-css-assets-webpack-plugin@latest" //plugins "npm install css-loader@latest file-loader@latest url-loader@latest less-loader@latest postcss-loader@latest vue-loader@latest vue-style-loader@latest"
3， 根据webpack4提示新增加mode 用来告诉webpack相应的内置优化
所以需要在dev跟prod文件添加相应的mode
在 dev 环境中，添添加mode：’development’，去掉 webpack.NamedModulesPlugin 及 webpack.NoEmitOnErrorsPlugin 插件，因为 webpack4 开发模式已经内置。
在 prod 环境中添加 mode 配置，用 optimization 代替以前的 webpack.optimize.CommonsChunkPlugin 、 uglifyjs-webpack-plugin 、 webpack.optimize.ModuleConcatenationPlugin 相关配置及引用
4， 之后npm run dev 运行,报错出现eslint的报错信息，更新eslint所用插件信息
"npm i eslint@latest eslint-config-standard@latest eslint-friendly-formatter@latest eslint-loader@latest eslint-plugin-import@latest eslint-plugin-node@latest eslint-plugin-promise@latest eslint-plugin-standard@latest eslint-plugin-vue@latest"
5， 升级之后npm run dev 运行，就报错
在HtmlWebpackPlugin中添加chunksSortMode: 'none'，网上查找资料说是在template file 和 routing file 出现了循环引用
想要进一步了解的可去进一步追求问题，查到解决办法让其无序引用
npm run dev运行报错,.vue文件解析出错最新版本的vue-loader文件需要引入，并以插件的形式注册
在base.conf.js文件
添加 ：
const {
VueLoaderPlugin
} = require('vue-loader') // 解决vue-loader报错信息
plugins: [
new VueLoaderPlugin()
],运行报错有eslint的错误与
Eslint错误是因为版本为最新的项目是后期写的会有相不符合新的规范的问题
"eslint": "^4.19.1", "eslint-config-standard": "^11.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.11.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-promise": "^3.7.0", "eslint-plugin-standard": "^3.1.0", "eslint-plugin-vue": "^4.5.0",
重新安装这个版本的会解请输入代码决问题（一个个排除，在老代码中用这个版本才可兼容以前的，不会出现eslint提示问题）
新建的项目可直接用最新的
这个是因为最新版本的vue-loader与已经写的代码样式的使用不符合降低版本，且不低于@15版本
npm i [email protected] --save-dev
6，再次运行npm run dev 的时候可能会出现在一个点卡顿时间过长的问题如若出现文件读取之后卡顿时间过长现象请删除node-modules文件重新安装依赖
且把[email protected]
如果路由使用import（）方法进行的懒加载 会提示错误，初步估计是babel的版本问题， 请采用官方推荐的路由写法
之后运行npm run dev ,即可运行成功
二，开始进行项目构建升级
先运行npm run build
开发环境已经提示新版的webpack4已经摒弃了CommonsChunkPlugin方法进行第三方库与公共模块的提取，
所以去掉prod.conf.js文件中的改插件的用法，注释这部分代码
// 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
// )
// }
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// minChunks: Infinity
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'app',
// async: 'vendor-async',
// children: true,
// minChunks: 3
// }),webpack4默认有UglifyJsPlugin这个配置进行代码压缩,新版本内置有此功能，所以可注释掉老版本的该插件// const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugin:[
// new UglifyJsPlugin({
// uglifyOptions: {
// compress: {
// warnings: false,
// // pure_funcs: ['console.log'] // 打包删除所有的log
// }
// },
// sourceMap: config.build.productionSourceMap,
// parallel: true
// }),
]之后运行构建npm run build会出现错误这是因为extract-text-webpack-plugin不能支持webpack4以上的版本现有两种方法
1.如若项目中有用import在js中直接引入l样式文件的则只能使用升级该插件到下一个版本及
"npm i extract-text-webpack-plugin@next --save-dev"
升级后的版本 之后运行npm run build报错
插件的临时版本@next并不支持contenthash修改为 hash 或者直接去掉都可且该插件已经不再更新
2 第二种方法 使用 mini-css-extract-plugin替代extract-text-webpack-plugin@next但不支持使用import直接去引用样式文件
先安装 npm i mini-css-extract-plugin –-save-dev
之后修改 prod.conf.js
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// new ExtractTextPlugin({
//filename:utils.assetsPath('css/[name].[contenthash].css'),
// allChunks: true,
// }),
new MiniCssExtractPlugin({
filename:utils.assetsPath('css/[name].[contenthash].css'),
allChunks: true,
}),
同时utils.js 修改该插件的引用
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// if (options.extract) {
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: 'vue-style-loader'
// })
// } else {
// return ['vue-style-loader'].concat(loaders)
// }
// 升级 webpack4， 由 ExtractTextPlugin 改MiniCssExtractPlugin
return [
options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader',
].concat(loaders)之后可配置webpack4的打包配置优化（可自行去研究webpack4的打包配置）
现在我们用内置好的打包配置）
运行npm run build 报错，这是css压缩优化插件的错误修改配置
并安装 cssnano 与 postcss-safe-parser插件
"npm i cssnano –save-dev" "npm i postcss-safe-parser–save-dev"
具体详细配置可自行配置 https://cssnano.co/guides/pre...
new OptimizeCSSPlugin({
// assetNameRegExp: /index\.[0-9a-zA-Z]+\.css/g, //需要根据自己打包出来的文件名来写正则匹配 默认为/\.css$/g
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {
removeAll: true
},
parser: require('postcss-safe-parser'),
autoprefixer: false
},
canPrint: true
}),之后npm run build 构建完成
备注：如果在dev时再次出现css-loader写在了style-loader之前
删掉vue-loader从新下载
最后献上已经配置好的package.json文件更插件以来的版本
{
"dependencies": {
"@handsontable/vue": "^3.1.0",
"ali-oss": "^6.1.0",
"axios": "^0.18.0",
"dayjs": "^1.8.0",
"element-china-area-data": "^4.1.2",
"element-ui": "^2.4.11",
"file-saver": "^2.0.1",
"handsontable": "^6.2.2",
"html2canvas": "^1.0.0-alpha.12",
"inject-loader": "^4.0.1",
"jquery": "^3.3.1",
"orgchart": "^2.1.2",
"storejs": "^1.0.25",
"v-contextmenu": "^2.8.0",
"v-viewer": "^1.3.2",
"vue": "^2.6.9",
"vue-amap": "^0.5.8",
"vue-bus": "^1.2.0",
"vue-cropper": "^0.4.8",
"vue-router": "^3.0.1",
"vue-wangeditor": "^1.3.10",
"vuedraggable": "^2.17.0",
"vuex": "^3.1.0",
"wangeditor": "^3.1.1",
"webpack-dev-middleware": "^3.6.2",
"xlsx": "^0.14.2"
},
"devDependencies": {
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"autoprefixer": "^7.1.2",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.4.2",
"copy-webpack-plugin": "^5.0.2",
"css-loader": "^2.0.2",
"cssnano": "^4.1.10",
"eslint": "^4.19.1",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.1.0",
"eslint-plugin-vue": "^4.5.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mockjs": "^1.0.1-beta3",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^3.0.0",
"postcss-safe-parser": "^4.0.1",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.3",
"script-loader": "^0.7.2",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^15.2.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.9",
"webpack": "^4.30.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1",
"webpack-merge": "^4.2.1"
},