webpack3升级到webpack4

webpack4出来有一段时间了，现在3升级到4
运行

npm i npm-check -g
npm-check -u

选择要更新的依赖，loader之类都更新到最新

npm i webpack-cli --save-dev

dev和prod 添加不同mode


utils.js css 预编译处理 前缀于 loder配置， 生产打包使用MiniCssExtractPlugin

exports.cssLoaders = function (options, booLocal) {
	options = options || {};
	var cssLoader = {
		loader: 'css-loader',
		options: {
			sourceMap: options.sourceMap,
			modules: true,
			localIdentName: '[local]',
			importLoaders: 1,
		}
	};
	var postcssLoader = {
		loader: 'postcss-loader',
		options: {
			plugins: [
				require('autoprefixer')({
					browsers: ['last 5 versions']
				})
			]
		}
	};
	// generate loader string to be used with extract text plugin
	function generateLoaders(loader, loaderOptions) {
		var loaders = [cssLoader, postcssLoader];
		if (loader) {
			let option = {
				...loaderOptions,
				sourceMap: options.sourceMap,
			};
			if (loader === 'less') {
				option['javascriptEnabled'] = true
			}
			loaders.push({
				loader: loader + '-loader',
				options: option
			});
		}

		// Extract CSS when that option is specified
		//(which is the case during production build)
		if (options.extract) {
			if (process.env.NODE_ENV === 'production') {
				return [MiniCssExtractPlugin.loader].concat(loaders);
			} else {
				return ExtractTextPlugin.extract({
					use: loaders,
					publicPath: '../../', 
					fallback: 'react-style-loader' // react-style-loader
				});
			}

		} else {
			return ['react-style-loader'].concat(loaders);
		}
	}

	// https://vue-loader.vuejs.org/en/configurations/extract-css.html
	return {
		css: generateLoaders(),
		postcss: generateLoaders('postcss'),
		less: generateLoaders('less'),
		sass: generateLoaders('sass', { indentedSyntax: true }),
		scss: generateLoaders('sass'),
		stylus: generateLoaders('stylus'),
		styl: generateLoaders('stylus'),
	};
};

commonschunkplugin 替换为 optimization.splitChunks

optimization: {
		runtimeChunk: {
			name: 'manifest'
		},
		splitChunks: {
			chunks: 'async',
			minSize: 30000,
			minChunks: 1,
			maxAsyncRequests: 6,
			maxInitialRequests: 5,
			name: false,
			cacheGroups: {
				polyfill: {
					test: /[\\/]node_modules[\\/](core-js|raf|@babel|babel)[\\/]/,
					name: 'polyfill',
					priority: 20,
					...commonOptions
				},
				react: {
					test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
					name: 'react',
					priority: 19,
					...commonOptions
				},
				router: {
					test: /[\\/]node_modules[\\/](react-router-dom)[\\/]/,
					name: 'router',
					priority: 18,
					...commonOptions
				},
				redux: {
					test: /[\\/]node_modules[\\/](react-redux|redux|redux-persist|redux-saga)[\\/]/,
					name: 'redux',
					priority: 17,
					...commonOptions
				},
				design: {
					test: /[\\/]node_modules[\\/](@ant-design)[\\/]/,
					name: 'design',
					priority: 16,
					...commonOptions
				},
			}
		}
	},

webpack.dev.conf.js 删除

maxInitialRequests配置的数量要大于cacheGroups 数量 不然cacheGroups 就会 合并到入口文件

webpack.prod.conf.js中
MiniCssExtractPlugin替换 ExtractTextPlugin

webpack.prod.conf.js 删除 以下配置

UglifyJsPlugin 加入

optimization: {
	minimizer: {
		new UglifyJsPlugin()
	}
}

npm run build 就看到了