webpack4官方已于近日晋级到了V4.5的稳固版本，对应的一些必备插件(webpack-contrib)也陆续完成了更新支撑，笔者在第一时候完成了项目由V3到V4的迁徙，在此纪录一下晋级过程当中碰到的各种题目和对应的处置惩罚手腕，轻易后续入坑者实时查阅，削减反复事情，假如以为本篇文章对你有协助，迎接点赞😁
一、Node版本依靠从新调解
官方不再支撑node4以下的版本，依靠node的环境版本>=6.11.5，固然考虑到最好的es6特征完成，发起node版本能够晋级到V8.9.4或以上版本，细致更新申明部份能够见：webpack4更新日记
"engines": {
"node": ">=6.11.5" // >=8.9.4 (recommendation version)
},二、用越发疾速的mode形式来优化设置文件
webpack4中供应的mode有两个值：development和production，默许值是 production。mode是我们为减小临盆环境构建体积以及勤俭开辟环境的构建时候供应的一种优化计划，供应对应的构建参数项的默许开启或封闭，下降设置本钱。
开启体式格局 1：直接在启动敕令后到场参数
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}开启体式格局 2：能够在设置文件中到场一个mode属性：
module.exports = {
mode: 'production' // development
};development形式下，将侧重于功用调试和优化开辟体验，包括以下内容：
- 浏览器调试东西
- 开辟阶段的细致毛病日记和提醒
- 疾速和优化的增量构建机制
production形式下，将侧重于模块体积优化和线上布置，包括以下内容：
- 开启一切的优化代码
- 更小的bundle大小
- 去撤除只在开辟阶段运转的代码
- Scope hoisting和Tree-shaking
- 自动启用uglifyjs对代码举行紧缩
webpack一直以来最饱受诟病的就是其设置门坎极高，设置内容庞杂而烦琐，轻易让人从入门到摒弃，而它的后起之秀如rollup，parcel等均在设置流程上做了极大的优化，做到开箱即用，webpack在V4中应当也从中自创了不少履历来提拔本身的设置效力，详见内容能够参考这篇文章《webpack 4: mode and optimization》
三、再会commonchunk，你好optimization
从webpack4最先官方移除了commonchunk插件，改用了optimization属性举行越发天真的设置，这也应当是从V3晋级到V4的代码修正过程当中最为庞杂的一部份，下面的代码等于optimize.splitChunks 中的一些设置参考，
module.exports = {
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimizer: true, // [new UglifyJsPlugin({...})]
splitChunks:{
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
priority: -10,
reuseExistingChunk: false,
test: /node_modules\/(.*)\.js/
},
styles: {
name: 'styles',
test: /\.(scss|css)$/,
chunks: 'all',
minChunks: 1,
reuseExistingChunk: true,
enforce: true
}
}
}
}
}从中我们不难发明，其主要变化有以下几个方面：
- commonchunk设置项被完全去掉，之前须要经由过程设置两次new webpack.optimize.CommonsChunkPlugin来离别猎取vendor和manifest的通用chunk体式格局已做了整合， 直接在optimization中设置runtimeChunk和splitChunks即可 ，提取功用也更加壮大，细致设置见：splitChunks
- runtimeChunk能够设置成true，single或许对象，用自动盘算当前构建的一些基础chunk信息，相似之前版本中的manifest信息猎取体式格局。
- webpack.optimize.UglifyJsPlugin如今也不须要了，只须要运用optimization.minimize为true就行，production mode下面自动为true，固然假如想运用第三方的紧缩插件也能够在optimization.minimizer的数组列表中举行设置
四、ExtractTextWebpackPlugin调解，发起选用新的CSS文件提取插件mini-css-extract-plugin
因为webpack4今后对css模块支撑的逐步完善和commonchunk插件的移除，在处置惩罚css文件提取的盘算体式格局上也做了些调解，之前我们首选运用的extract-text-webpack-plugin也完成了其历史使命，将让位于mini-css-extract-plugin
基础设置以下：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // replace ExtractTextPlugin.extract({..})
"css-loader"
]
}
]
}
}临盆环境下的设置优化：
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: true
}),
new OptimizeCSSAssetsPlugin({}) // use OptimizeCSSAssetsPlugin
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/app.[name].css',
chunkFilename: 'css/app.[contenthash:12].css' // use contenthash *
})
]
....
}
将多个css chunk合并成一个css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.scss|css$/,
chunks: 'all', // merge all the css chunk to one file
enforce: true
}
}
}
}
}五、其他调解项备忘
- NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默许情况下处于临盆形式）
- ModuleConcatenationPlugin- > optimization.concatenateModules（默许情况下处于临盆形式）
- NamedModulesPlugin- > optimization.namedModules（在开辟形式下默许开启）
- webpack敕令优化 -> 宣布了自力的 webpack-cli 敕令行东西包
- webpack-dev-server -> 发起晋级到最新版本
- html-webpack-plugin -> 发起晋级到的最新版本
- file-loader -> 发起晋级到最新版本
- url-loader -> 发起晋级到最新版本
