性能本篇主要介绍 webpack 中的一些常用性能，包括热模块替换、source map、oneOf、缓存、tree shaking、代码分割、懒加载、渐进式网络应用程序、多进程打包、外部扩展(externals)和动态链接(dll)。准备本篇的环境虽然可以仅展示核心代码，但笔者认为在一个完整的环境中边看边做，举一反三，效果更佳。这里的环境其实就是实战一一文完整的示例，包含打包样式、打包图片、以及打包javascript项目结果如下：webpack-example3

　　- src // 项目源码

　　- index.html // 页面模板

　　- index.js // 入口

　　- package.json // 存放了项目依赖的包

　　- webpack.config.js // webpack配置文件

　　代码如下：// index.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,

　　},

　　};