webpack4 官方已经于近日升级到了 V4.5 的稳定版本, 对应的一些必备插件 (webpack-contrib) 也陆续完成了更新支持, 笔者在第一时间完成了项目由 V3 到 V4 的迁移, 在此记录一下升级过程中遇到的种种问题和对应的解决手段, 方便后续入坑者及时查阅, 减少重复工作, 如果觉得本篇文章对你有帮助, 欢迎点赞
一, Node 版本依赖重新调整
官方不再支持 node4 以下的版本, 依赖 node 的环境版本>=6.11.5, 当然考虑到最佳的 es6 特性实现, 建议 node 版本可以升级到 V8.9.4 或以上版本, 具体更新说明部分可以见: webpack4 更新日志 https://github.com/webpack/webpack/releases/tag/v4.0.0
- "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 https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
三, 再见 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 https://webpack.js.org/plugins/split-chunks-plugin/#optimization-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 文件提取的计算方式上也做了些调整, 之前我们首选使用的 https://github.com/webpack-contrib/extract-text-webpack-plugin 也完成了其历史使命, 将让位于 https://github.com/webpack-contrib/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 https://webpack.js.org/api/cli/ 命令行工具包
webpack-dev-server -> 建议升级到最新版本
html-webpack-plugin -> 建议升级到的最新版本
file-loader -> 建议升级到最新版本
url-loader -> 建议升级到最新版本
六, 参考工程
webpack4 配置工程实例 https://github.com/taikongfeizhu/react-mobx-react-router4-boilerplate
七, 参阅资料
webpack4 https://blog.csdn.net/qq_20334295/article/details/79401231
webpack4 发布概览 https://zhuanlan.zhihu.com/p/34028750
webpack 4: mode and optimization https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a
webpack4 新特性介绍
webpack4 升级指北
webpack4 升级指南以及从 webpack3.x 迁移 https://blog.csdn.net/qq_26733915/article/details/79446460
来源: https://segmentfault.com/a/1190000014247030