3、升级webpack相关插件，包括copy-webpack-plugin、css-loader、eslint-loader、file-loader、html-webpack-plugin、url-loader、friendly-errors-webpack-plugin、optimize-css-assets-webpack-plugin、uglifyjs-webpack-plugin
cnpm uninstall -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin cnpm install -D copy-webpack-plugin css-loader eslint-loader file-loader html-webpack-plugin url-loader friendly-errors-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
4、升级vue-loader
由于vue-loader升级到版本15后，配置有较多的变化，稳妥起见，可以只将vue-loader升级到14.4.2
cnpm uninstall -D vue-loader cnpm uninstall -D vue-loader@14.4.2
5、替换webpack相关插件，extract-text-webpack-plugin替换为mini-css-extract-plugin
cnpm uninstall -D extract-text-webpack-plugin
cnpm install -D mini-css-extract-plugin
配置
下面对配置文件的修改进行详细说明：
1、webpack.base.conf.js文件
增加node:process.env.NODE_ENV即可
module.exports = { + mode: process.env.NODE_ENV, ...
2、webpack.prop.conf.js文件
该文件的配置项较为复杂
（1）将ExtractTextPlugin替换为MiniCssExtraPlugin
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin") - const ExtractTextPlugin = require('extract-text-webpack-plugin') ... - new ExtractTextPlugin({ + new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: true, }), ...
（2）删除UglifyJsPlugin配置项
- const UglifyJsPlugin = require('uglifyjs-webpack-plugin') ... - new UglifyJsPlugin({ - uglifyOptions: { - compress: { - warnings: false - } - }, - sourceMap: config.build.productionSourceMap, - parallel: true - })
（3）删除CommonsChunkPlugin配置项
- new webpack.optimize.CommonsChunkPlugin({ - name: 'vendor', - minChunks (module) { - 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 - }), ...
（4）添加optimization配置项
+ optimization: { + splitChunks: { + chunks: 'async', + minSize: 30000, + minChunks: 1, + maxAsyncRequests: 5, + maxInitialRequests: 3, + automaticNameDelimiter: '~', + name: true, + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + priority: -10 + }, + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true + } + } + }, + runtimeChunk: { name: 'runtime' } + },
详细配置移步前端小站源码