相比于webpack3,webpack4可以零配置运行,打包速度比之前提高了90%,可以直接到ES6的代码进行无用代码剔除。
1.升级nodejs
使用webpack4时,必须保证Node.js版本>=8.9.4,因为webpack4使用了大量的ES6的语法,这些语法在nodejs新版v8中得到了原生支持
2.升级webpack主要插件,升级的操作很简单,先删除低版本,再安装新版本即可。但要注意的是webpack4版本中cli工具分离成了webpack核心库与webpack-cli命令行工具两个模块,需要使用cli,必须安装webpack-cli。
npm uninstall webpack webpack-bundle-analyzer webpack-dev-server webpack-merge -D
npm install webpack webpack-cli webpack-bundle-analyzer webpack-dev-server webpack-merge -D
3.升级webpack相关插件
npm uninstall 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 -D
npm install 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 -D
4.升级vue-loader
由于vue-loader升级到版本15后,配置有较多变化,稳妥起见,可以将vue-loader升级到14.2.4
npm uninstall vue-loader -D
npm install vue-loader@14.2.4 -D
5.替换webpack相关插件,extract-text-webpack-plugin替换为mini-css-extract-plugin
npm uninstall extract-text-webpack-plugin -D
npm install mini-css-extract-plugin -D
配置修改
1.webpack.base.conf.js文件
增加mode属性
module.exports = {
+ mode: process.env.NODE_ENV
}
2. util.js文件
+ const MiniCssExtractPlugin = require("mini-css-extract-plugin")
- const ExtractTextPlugin = require('extract-text-webpack-plugin')
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
+ return [MiniCssExtractPlugin.loader].concat(loaders)
- return ExtractTextPlugin.extract({
- use: loaders,
- fallback: 'vue-style-loader'
- })
} else {
return ['vue-style-loader'].concat(loaders)
}
}
3.webpack.prop.conf.js文件
该文件的配置修改较为复杂
(1)将MiniCssExtractPlugin代替ExtractTextPlugin
+ 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配置项(与plugins平级)
+ 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'
+ }
+ },