从零开始学 Webpack 4.0（七）：细致剖析配置项优化

前言

随着项目体量的增大，Webpack 的构建速度逐渐成为影响开发效率的重要因素。为了解决这一问题，本文将对 Webpack 4.0 的配置项进行优化，涉及插件、Loader、构建、模块、性能、打包等方面的优化策略和实战技巧，助力开发者提升 Webpack 构建效率。

项目结构

本文会以 demo07 作为项目文件夹，各文件直接拿之前项目 demo05 的，接下来做些修改。

• package.json
• package-lock.json
• webpack.co

package.json

{
  "name": "demo07",
  "version": "1.0.0",
  "description": "Webpack 4.0 配置项优化",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --mode=production"
  },
  "dependencies": {
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^5.0.2",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^3.0.0",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^4.1.0"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^9.0.1"
  }
}

package-lock.json

{
  "name": "demo07",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "packages": {
    "": {
      "name": "demo07",
      "version": "1.0.0",
      "dependencies": {
        "babel-core": {
          "version": "7.0.0-bridge.0",
          "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz",
          "integrity": "sha512-poPX9mZH/5dsKBg5A40cuSpklXvIoqRL3DESR21n76oNMu9i6q8/pOaS/Aht68JE90p3oezShU1e95S8fxsPg==",
          "dev": true,
          "requires": {
            "babel-plugin-external-helpers": "^7.0.0",
            "babel-runtime": "^7.0.0",
            "core-js": "^2.5.7",
            "寄生虫": "^7.0.0",
            "regenerator-runtime": "^0.13.7"
          }
        },
        "babel-loader": {
          "version": "8.0.6",
          "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.0.6.tgz",
          "integrity": "sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9SmTIbZI1aft/h6S4AK1Hxs25662s/Qsnk7c4j+j9eoc7PAHbo6WbP77A==",
          "dev": true,
          "requires": {
            "find-cache-dir": "^2.0.0",
            "loader-utils": "^1.2.3",
            "mkdirp": "^0.5.1",
            "schema-utils": "^2.6.1"
          }
        },
        "babel-plugin-external-helpers": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/babel-plugin-external-helpers/-/babel-plugin-external-helpers-7.2.0.tgz",
          "integrity": "sha512-qf9l1CPSmYFBgjDJQbdvG7Q9pO41T4owLl2pDHj0I4Gv9ce9S9A0ieeuODc09lpuFF28K5806Vfu0+56b6g==",
          "dev": true,
          "requires": {
            "babel-helper-builder-binary-assignment-operator-plugin": "^7.1.0",
            "babel-helper-builder-typeof": "^7.1.0",
            "babel-plugin-syntax-import-meta": "^7.2.0"
          }
        },
        "babel-plugin-syntax-import-meta": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/babel-plugin-syntax-import-meta/-/babel-plugin-syntax-import-meta-7.2.0.tgz",
          "integrity": "sha512-VwJru+58rdWmZYD0dynmW9Ur5IGS+a7yj1EUaV76mnf27P/evGbr5J33fQvir7肄/Wz14+404l93fG0u+X6g==",
          "dev": true,
          "requires": {
            "@babel/helper-plugin-utils": "^7.0.0"
          }
        },
        "babel-runtime": {
          "version": "7.14.5",
          "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-7.14.5.tgz",
          "integrity": "sha512-//8m7sBJ1vBMRVN4/66SmA0ee/agjh60ej+HVw5n18qYSQP1Y5O1xTwIZeePL9Clv/uvcGorajh0wxYZ+ibvqw==",
          "dev": true,
          "requires": {
            "regenerator-runtime": "^0.13.4"
          }
        },
        "copy-webpack-plugin": {
          "version": "9.0.1",
          "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-9.0.1.tgz",
          "integrity": "sha512-14gHKKdYIxF84jCEgPgYXCPpldbw9I71IuHwa15f0q/lBy/BO/s+h79xy95GV35+-B0u62zbYeskWDM1FR5/w==",
          "dev": true,
          "requires": {
            "fast-glob": "^3.2.5",
            "glob-parent": "^6.0.0",
            "globby": "^11.0.3",
            "normalize-path": "^3.0.0",
            "p-limit": "^3.1.0",
            "schema-utils": "^3.0.0",
            "serialize-javascript": "^6.0.0"
          }
        },
        "core-js": {
          "version": "2.6.12",
          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
          "integrity": "sha512-Kb2wC0fvs19lguZU3c1yD8skxcjCUQebG1HEbBfwlvXqNia6PeoMVDmalfZcY6fT0AuLjlu3G6E243SWaKAVhg==",
          "dev": true
        },
        "css-loader": {
          "version": "5.0.2",
          "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.0.2.tgz",
          "integrity": "sha512-BcKkOHskdIY1at6eTJgi7St0dL7O