其他章节请看：
性能本篇主要介绍 webpack 中的一些常用性能，包括热模块替换、source map、oneOf、缓存、tree shaking、代码分割、懒加载、渐进式网络应用程序、多进程打包、外部扩展(externals)和动态链接（dll）。
准备本篇的环境虽然可以仅展示核心代码，但笔者认为在一个完整的环境中边看边做，举一反三，效果更佳。
这里的环境其实就是实战一一文完整的示例，包含打包样式、打包图片、以及打包javascript
项目结果如下：
webpack-example3 - src // 项目源码 - index.html // 页面模板 - index.js // 入口 - package.json // 存放了项目依赖的包 - webpack.config.js // webpack配置文件代码如下：
// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=`, initial-scale=1.0"> <title>Document</title> </head> <body> <p>请查看控制台</p> <span></span> </body> </html> // index.js console.log('hello'); // package.json { "name": "webpack-example3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack-dev-server" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/preset-env": "^7.14.2", "babel-loader": "^8.2.2", "core-js": "3.11", "css-loader": "^5.2.4", "eslint": "^7.26.0", "eslint-config-airbnb-base": "^14.2.1", "eslint-webpack-plugin": "^2.5.4", "file-loader": "^6.2.0", "html-loader": "^1.3.2", "html-webpack-plugin": "^4.5.2", "less-loader": "^7.3.0", "mini-css-extract-plugin": "^1.6.0", "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss-loader": "^4.3.0", "postcss-preset-env": "^6.7.0", "url-loader": "^4.1.1", "webpack": "^4.46.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.2" } } // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); process.env.NODE_ENV = 'development' const postcssLoader = { loader: 'postcss-loader', options: { // postcss 只是个平台，具体功能需要使用插件 // Set PostCSS options and plugins postcssOptions:{ plugins:[ // 配置插件 postcss-preset-env [ "postcss-preset-env", { // browsers: 'chrome > 10', // stage: }, ], ] } } } module.exports = { entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/i, // 将 style-loader 改为 MiniCssExtractPlugin.loader use: [MiniCssExtractPlugin.loader, "css-loader", postcssLoader], }, { test: /\.less$/i, loader: [ // 将 style-loader 改为 MiniCssExtractPlugin.loader MiniCssExtractPlugin.loader, "css-loader", postcssLoader, "less-loader", ], }, { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { // 指定文件的最大大小（以字节为单位） limit: 1024*6, }, }, ], }, // + { test: /\.html$/i, loader: 'html-loader', }, { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', // + { // 配置处理polyfill的方式 useBuiltIns: "usage", // 版本与我们下载的版本保持一致 corejs: { version: "3.11"}, "targets": "> 0.25%, not dead" } ] ] } } } ] }, plugins: [ new MiniCssExtractPlugin(), new OptimizeCssAssetsPlugin(), new HtmlWebpackPlugin({ template: 'src/index.html' }), // new ESLintPlugin({ // // 将启用ESLint自动修复功能。此选项将更改源文件 // fix: true // }) ], mode: 'development', devServer: { open: true, contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, }, };Tip: 由于本篇不需要 eslint，为避免影响，所以先注释。
在 webpack-example3 目录下运行项目：
// 安装项目依赖的包 > npm i // 启动服务 > npm run dev浏览器会自动打开页面，如果看到”请查看控制台“，控制台也输出了“hello”，说明环境准备就绪。
注：笔者运行 npm i 时出现了一些问题，在公司运行 npm i 验证此文是否正确，结果下载得很慢（好似卡住了），于是改为淘宝镜像 cnpm i，这次仅花少许时间就执行完毕，接着运行 npm run dev 却在终端报错。于是根据错误提示安装 babel-loader@7 ，再次重启服务，问题仍旧没有解决。回家后，运行 npm i，依赖安装成功，可能环境也很重要。
// 终端报错 ... babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. 热模块替换模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块，而无需完全刷新。
Tip: HMR 不适用于生产环境，这意味着它应当用于开发环境
下面我们就从 html、css 和 js 三个角度来体验热模块替换。
启用 hmr此功能可以很大程度提高生产效率。我们要做的就是更新 webpack-dev-server 配置， 然后使用 webpack 内置的 HMR 插件。
配置 hot: true 就能启用 hmr。
// webpack.config.js module.exports = { devServer: { // 开启热模块替换 hot: true } } css 使用 hmr新建一个 css 文件，通过 index.js 引入：
// a.css p{color:blue;} // index.js import './a.css'首先我们先不开启 hmr，重启服务（npm run dev），浏览器文字显示蓝色。如果改为红色（color:red;），你会发现整个页面都刷新了，文字变为红色。
接着开启hmr（hot: true），重启服务，再次修改颜色，文字的颜色会改变，但整个页面不会刷新。
Tip：如果觉得每次重启服务，都会自动打开浏览器页面，你可以注释掉 open: true 来关闭这个特征。