push doc

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -0,0 +1,32 @@
+<div align="center">
+  <img width="200" src="http://xxpromise.gitee.io/webpack5-docs/imgs/logo.svg">
+  <h1>Webpack5 教程文档</h1>
+</div>
+
+---
+
+## 🎉 内容
+
+- 👏 基础配置
+- 💅 高级优化
+- 🚀 项目配置
+- 💪 深入原理
+
+## 🌐 地址
+
+- [http://xxpromise.gitee.io/webpack5-docs](http://xxpromise.gitee.io/webpack5-docs)
+
+## 📦️ 启动方式
+
+### 1. 下载依赖
+
+```
+npm i
+```
+
+### 2. 运行指令
+
+- 开发环境启动项目：`npm start` 或 `npm run dev`
+- 生产环境打包项目：`npm run build`
+
+** 特别注意：启动文档所有目录不能有任何中文，否则会报错！**

docs/.vuepress/.cache/deps/@vue_devtools-api.js

@@ -0,0 +1,27 @@
+import {
+  isPerformanceSupported,
+  now,
+  setupDevtoolsPlugin
+} from "./chunk-FFTC5UN2.js";
+import {
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+} from "./chunk-7EWVPKSC.js";
+
+// dep:@vue_devtools-api
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+export {
+  isPerformanceSupported,
+  now,
+  setupDevtoolsPlugin
+};
+//# sourceMappingURL=@vue_devtools-api.js.map

docs/.vuepress/.cache/deps/@vue_devtools-api.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["dep:@vue_devtools-api"],
+  "sourcesContent": ["\nexport * from \"../../../../node_modules/@vue/devtools-api/lib/esm/index.js\""],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

docs/.vuepress/.cache/deps/@vuepress_shared.js

@@ -0,0 +1,370 @@
+import {
+  isArray,
+  isFunction,
+  isPromise,
+  isString
+} from "./chunk-MZSLHFZ6.js";
+import {
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+} from "./chunk-7EWVPKSC.js";
+
+// dep:@vuepress_shared
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/index.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/types/index.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/types/head.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/types/locale.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/types/page.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/types/site.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/types/ssr.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/utils/index.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/utils/dedupeHead.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/utils/resolveHeadIdentifier.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var resolveHeadIdentifier = ([tag, attrs, content]) => {
+  if (tag === "meta" && attrs.name) {
+    return `${tag}.${attrs.name}`;
+  }
+  if (["title", "base"].includes(tag)) {
+    return tag;
+  }
+  if (tag === "template" && attrs.id) {
+    return `${tag}.${attrs.id}`;
+  }
+  return JSON.stringify([tag, attrs, content]);
+};
+
+// node_modules/@vuepress/shared/lib/esm/utils/dedupeHead.js
+var dedupeHead = (head) => {
+  const identifierSet = /* @__PURE__ */ new Set();
+  const result = [];
+  head.forEach((item) => {
+    const identifier = resolveHeadIdentifier(item);
+    if (!identifierSet.has(identifier)) {
+      identifierSet.add(identifier);
+      result.push(item);
+    }
+  });
+  return result;
+};
+
+// node_modules/@vuepress/shared/lib/esm/utils/ensureLeadingSlash.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var ensureLeadingSlash = (str) => str.replace(/^\/?/, "/");
+
+// node_modules/@vuepress/shared/lib/esm/utils/ensureEndingSlash.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var ensureEndingSlash = (str) => /(\.html|\/)$/.test(str) ? str : str + "/";
+
+// node_modules/@vuepress/shared/lib/esm/utils/formatDateString.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var formatDateString = (str, defaultDateString = "") => {
+  const dateMatch = str.match(/\b(\d{4})-(\d{1,2})-(\d{1,2})\b/);
+  if (dateMatch === null) {
+    return defaultDateString;
+  }
+  const [, yearStr, monthStr, dayStr] = dateMatch;
+  return [yearStr, monthStr.padStart(2, "0"), dayStr.padStart(2, "0")].join("-");
+};
+
+// node_modules/@vuepress/shared/lib/esm/utils/htmlEscape.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var htmlEscapeMap = {
+  "&": "&",
+  "<": "&lt;",
+  ">": "&gt;",
+  "'": "&#39;",
+  '"': "&quot;"
+};
+var htmlEscapeRegexp = /[&<>'"]/g;
+var htmlEscape = (str) => str.replace(htmlEscapeRegexp, (char) => htmlEscapeMap[char]);
+
+// node_modules/@vuepress/shared/lib/esm/utils/htmlUnescape.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var htmlUnescapeMap = {
+  "&amp;": "&",
+  "&#38;": "&",
+  "&lt;": "<",
+  "&#60;": "<",
+  "&gt;": ">",
+  "&#62;": ">",
+  "&apos;": "'",
+  "&#39;": "'",
+  "&quot;": '"',
+  "&#34;": '"'
+};
+var htmlUnescapeRegexp = /&(amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
+var htmlUnescape = (str) => str.replace(htmlUnescapeRegexp, (char) => htmlUnescapeMap[char]);
+
+// node_modules/@vuepress/shared/lib/esm/utils/isLinkExternal.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vuepress/shared/lib/esm/utils/isLinkFtp.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var isLinkFtp = (link) => link.startsWith("ftp://");
+
+// node_modules/@vuepress/shared/lib/esm/utils/isLinkHttp.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var isLinkHttp = (link) => /^(https?:)?\/\//.test(link);
+
+// node_modules/@vuepress/shared/lib/esm/utils/isLinkExternal.js
+var isLinkExternal = (link, base = "/") => {
+  if (isLinkHttp(link) || isLinkFtp(link)) {
+    return true;
+  }
+  if (link.startsWith("/") && !link.startsWith(base)) {
+    return true;
+  }
+  return false;
+};
+
+// node_modules/@vuepress/shared/lib/esm/utils/isLinkMailto.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var isLinkMailto = (link) => /^mailto:/.test(link);
+
+// node_modules/@vuepress/shared/lib/esm/utils/isLinkTel.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var isLinkTel = (link) => /^tel:/.test(link);
+
+// node_modules/@vuepress/shared/lib/esm/utils/isPlainObject.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var isPlainObject = (val) => Object.prototype.toString.call(val) === "[object Object]";
+
+// node_modules/@vuepress/shared/lib/esm/utils/normalizePackageName.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var normalizePackageName = (request, org, type = null) => {
+  const orgPrefix = `${org}-`;
+  const typePrefix = type === null ? "" : `${type}-`;
+  const scopedMatch = request.match(/^@(.*)\/(.*)$/);
+  if (scopedMatch === null) {
+    if (request.startsWith(`${orgPrefix}${typePrefix}`)) {
+      return request;
+    }
+    return `${orgPrefix}${typePrefix}${request}`;
+  }
+  const [, reqOrg, reqName] = scopedMatch;
+  if (reqOrg === org) {
+    if (reqName.startsWith(typePrefix)) {
+      return request;
+    }
+    return `@${reqOrg}/${typePrefix}${reqName}`;
+  }
+  if (reqName.startsWith(`${orgPrefix}${typePrefix}`)) {
+    return request;
+  }
+  return `@${reqOrg}/${orgPrefix}${typePrefix}${reqName}`;
+};
+
+// node_modules/@vuepress/shared/lib/esm/utils/removeEndingSlash.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var removeEndingSlash = (str) => str.replace(/\/$/, "");
+
+// node_modules/@vuepress/shared/lib/esm/utils/removeLeadingSlash.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var removeLeadingSlash = (str) => str.replace(/^\//, "");
+
+// node_modules/@vuepress/shared/lib/esm/utils/resolveLocalePath.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var resolveLocalePath = (locales, routePath) => {
+  const localePaths = Object.keys(locales).sort((a, b) => {
+    const levelDelta = b.split("/").length - a.split("/").length;
+    if (levelDelta !== 0) {
+      return levelDelta;
+    }
+    return b.length - a.length;
+  });
+  for (const localePath of localePaths) {
+    if (routePath.startsWith(localePath)) {
+      return localePath;
+    }
+  }
+  return "/";
+};
+
+// node_modules/@vuepress/shared/lib/esm/utils/resolveRoutePathFromUrl.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var resolveRoutePathFromUrl = (url, base = "/") => url.replace(/^(https?:)?\/\/[^/]*/, "").replace(new RegExp(`^${base}`), "/");
+export {
+  dedupeHead,
+  ensureEndingSlash,
+  ensureLeadingSlash,
+  formatDateString,
+  htmlEscape,
+  htmlUnescape,
+  isArray,
+  isFunction,
+  isLinkExternal,
+  isLinkFtp,
+  isLinkHttp,
+  isLinkMailto,
+  isLinkTel,
+  isPlainObject,
+  isPromise,
+  isString,
+  normalizePackageName,
+  removeEndingSlash,
+  removeLeadingSlash,
+  resolveHeadIdentifier,
+  resolveLocalePath,
+  resolveRoutePathFromUrl
+};
+//# sourceMappingURL=@vuepress_shared.js.map

docs/.vuepress/.cache/deps/_metadata.json

@@ -0,0 +1,56 @@
+{
+  "hash": "502f84ca",
+  "browserHash": "cb0631a5",
+  "optimized": {
+    "@vue/devtools-api": {
+      "src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
+      "file": "@vue_devtools-api.js",
+      "fileHash": "9dca8e23",
+      "needsInterop": false
+    },
+    "@vueuse/core": {
+      "src": "../../../../node_modules/@vueuse/core/index.mjs",
+      "file": "@vueuse_core.js",
+      "fileHash": "7fb62b53",
+      "needsInterop": false
+    },
+    "vue": {
+      "src": "../../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "7f71fb52",
+      "needsInterop": false
+    },
+    "vue-router": {
+      "src": "../../../../node_modules/vue-router/dist/vue-router.esm-bundler.js",
+      "file": "vue-router.js",
+      "fileHash": "1b55d1d2",
+      "needsInterop": false
+    },
+    "nprogress": {
+      "src": "../../../../node_modules/nprogress/nprogress.js",
+      "file": "nprogress.js",
+      "fileHash": "3f38f142",
+      "needsInterop": true
+    },
+    "@vuepress/shared": {
+      "src": "../../../../node_modules/@vuepress/shared/lib/esm/index.js",
+      "file": "@vuepress_shared.js",
+      "fileHash": "71b205b2",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-FFTC5UN2": {
+      "file": "chunk-FFTC5UN2.js"
+    },
+    "chunk-CCMLXPK7": {
+      "file": "chunk-CCMLXPK7.js"
+    },
+    "chunk-MZSLHFZ6": {
+      "file": "chunk-MZSLHFZ6.js"
+    },
+    "chunk-7EWVPKSC": {
+      "file": "chunk-7EWVPKSC.js"
+    }
+  }
+}

docs/.vuepress/.cache/deps/chunk-7EWVPKSC.js

@@ -0,0 +1,54 @@
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+
+// <define:CODE_COPY_LOCALES>
+var init_define_CODE_COPY_LOCALES = __esm({
+  "<define:CODE_COPY_LOCALES>"() {
+  }
+});
+
+// <define:CODE_COPY_OPIONS>
+var init_define_CODE_COPY_OPIONS = __esm({
+  "<define:CODE_COPY_OPIONS>"() {
+  }
+});
+
+// <define:__EXTERNAL_LINK_ICON_LOCALES__>
+var init_define_EXTERNAL_LINK_ICON_LOCALES = __esm({
+  "<define:__EXTERNAL_LINK_ICON_LOCALES__>"() {
+  }
+});
+
+// <define:__MZ_ZOOM_OPTIONS__>
+var init_define_MZ_ZOOM_OPTIONS = __esm({
+  "<define:__MZ_ZOOM_OPTIONS__>"() {
+  }
+});
+
+// <define:__SEARCH_HOT_KEYS__>
+var init_define_SEARCH_HOT_KEYS = __esm({
+  "<define:__SEARCH_HOT_KEYS__>"() {
+  }
+});
+
+// <define:__SEARCH_LOCALES__>
+var init_define_SEARCH_LOCALES = __esm({
+  "<define:__SEARCH_LOCALES__>"() {
+  }
+});
+
+export {
+  __commonJS,
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+};
+//# sourceMappingURL=chunk-7EWVPKSC.js.map

docs/.vuepress/.cache/deps/chunk-7EWVPKSC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

docs/.vuepress/.cache/deps/chunk-FFTC5UN2.js

@@ -0,0 +1,268 @@
+import {
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+} from "./chunk-7EWVPKSC.js";
+
+// node_modules/@vue/devtools-api/lib/esm/time.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var supported;
+var perf;
+function isPerformanceSupported() {
+  var _a;
+  if (supported !== void 0) {
+    return supported;
+  }
+  if (typeof window !== "undefined" && window.performance) {
+    supported = true;
+    perf = window.performance;
+  } else if (typeof global !== "undefined" && ((_a = global.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
+    supported = true;
+    perf = global.perf_hooks.performance;
+  } else {
+    supported = false;
+  }
+  return supported;
+}
+function now() {
+  return isPerformanceSupported() ? perf.now() : Date.now();
+}
+
+// node_modules/@vue/devtools-api/lib/esm/index.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/env.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+function getDevtoolsGlobalHook() {
+  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+}
+function getTarget() {
+  return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
+}
+var isProxyAvailable = typeof Proxy === "function";
+
+// node_modules/@vue/devtools-api/lib/esm/const.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var HOOK_SETUP = "devtools-plugin:setup";
+var HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
+
+// node_modules/@vue/devtools-api/lib/esm/proxy.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var ApiProxy = class {
+  constructor(plugin, hook) {
+    this.target = null;
+    this.targetQueue = [];
+    this.onQueue = [];
+    this.plugin = plugin;
+    this.hook = hook;
+    const defaultSettings = {};
+    if (plugin.settings) {
+      for (const id in plugin.settings) {
+        const item = plugin.settings[id];
+        defaultSettings[id] = item.defaultValue;
+      }
+    }
+    const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
+    let currentSettings = Object.assign({}, defaultSettings);
+    try {
+      const raw = localStorage.getItem(localSettingsSaveId);
+      const data = JSON.parse(raw);
+      Object.assign(currentSettings, data);
+    } catch (e) {
+    }
+    this.fallbacks = {
+      getSettings() {
+        return currentSettings;
+      },
+      setSettings(value) {
+        try {
+          localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
+        } catch (e) {
+        }
+        currentSettings = value;
+      },
+      now() {
+        return now();
+      }
+    };
+    if (hook) {
+      hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
+        if (pluginId === this.plugin.id) {
+          this.fallbacks.setSettings(value);
+        }
+      });
+    }
+    this.proxiedOn = new Proxy({}, {
+      get: (_target, prop) => {
+        if (this.target) {
+          return this.target.on[prop];
+        } else {
+          return (...args) => {
+            this.onQueue.push({
+              method: prop,
+              args
+            });
+          };
+        }
+      }
+    });
+    this.proxiedTarget = new Proxy({}, {
+      get: (_target, prop) => {
+        if (this.target) {
+          return this.target[prop];
+        } else if (prop === "on") {
+          return this.proxiedOn;
+        } else if (Object.keys(this.fallbacks).includes(prop)) {
+          return (...args) => {
+            this.targetQueue.push({
+              method: prop,
+              args,
+              resolve: () => {
+              }
+            });
+            return this.fallbacks[prop](...args);
+          };
+        } else {
+          return (...args) => {
+            return new Promise((resolve) => {
+              this.targetQueue.push({
+                method: prop,
+                args,
+                resolve
+              });
+            });
+          };
+        }
+      }
+    });
+  }
+  async setRealTarget(target) {
+    this.target = target;
+    for (const item of this.onQueue) {
+      this.target.on[item.method](...item.args);
+    }
+    for (const item of this.targetQueue) {
+      item.resolve(await this.target[item.method](...item.args));
+    }
+  }
+};
+
+// node_modules/@vue/devtools-api/lib/esm/api/index.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/api/api.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/api/app.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/api/component.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/api/context.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/api/hooks.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/api/util.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/plugin.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+
+// node_modules/@vue/devtools-api/lib/esm/index.js
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
+  const descriptor = pluginDescriptor;
+  const target = getTarget();
+  const hook = getDevtoolsGlobalHook();
+  const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
+  if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
+    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
+  } else {
+    const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
+    const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
+    list.push({
+      pluginDescriptor: descriptor,
+      setupFn,
+      proxy
+    });
+    if (proxy)
+      setupFn(proxy.proxiedTarget);
+  }
+}
+
+export {
+  isPerformanceSupported,
+  now,
+  setupDevtoolsPlugin
+};
+//# sourceMappingURL=chunk-FFTC5UN2.js.map

docs/.vuepress/.cache/deps/chunk-MZSLHFZ6.js

@@ -0,0 +1,292 @@
+import {
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+} from "./chunk-7EWVPKSC.js";
+
+// node_modules/@vue/shared/dist/shared.esm-bundler.js
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+function makeMap(str, expectsLowerCase) {
+  const map = /* @__PURE__ */ Object.create(null);
+  const list = str.split(",");
+  for (let i = 0; i < list.length; i++) {
+    map[list[i]] = true;
+  }
+  return expectsLowerCase ? (val) => !!map[val.toLowerCase()] : (val) => !!map[val];
+}
+var GLOBALS_WHITE_LISTED = "Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt";
+var isGloballyWhitelisted = makeMap(GLOBALS_WHITE_LISTED);
+var specialBooleanAttrs = `itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly`;
+var isSpecialBooleanAttr = makeMap(specialBooleanAttrs);
+var isBooleanAttr = makeMap(specialBooleanAttrs + `,async,autofocus,autoplay,controls,default,defer,disabled,hidden,loop,open,required,reversed,scoped,seamless,checked,muted,multiple,selected`);
+function includeBooleanAttr(value) {
+  return !!value || value === "";
+}
+var isNoUnitNumericStyleProp = makeMap(`animation-iteration-count,border-image-outset,border-image-slice,border-image-width,box-flex,box-flex-group,box-ordinal-group,column-count,columns,flex,flex-grow,flex-positive,flex-shrink,flex-negative,flex-order,grid-row,grid-row-end,grid-row-span,grid-row-start,grid-column,grid-column-end,grid-column-span,grid-column-start,font-weight,line-clamp,line-height,opacity,order,orphans,tab-size,widows,z-index,zoom,fill-opacity,flood-opacity,stop-opacity,stroke-dasharray,stroke-dashoffset,stroke-miterlimit,stroke-opacity,stroke-width`);
+var isKnownHtmlAttr = makeMap(`accept,accept-charset,accesskey,action,align,allow,alt,async,autocapitalize,autocomplete,autofocus,autoplay,background,bgcolor,border,buffered,capture,challenge,charset,checked,cite,class,code,codebase,color,cols,colspan,content,contenteditable,contextmenu,controls,coords,crossorigin,csp,data,datetime,decoding,default,defer,dir,dirname,disabled,download,draggable,dropzone,enctype,enterkeyhint,for,form,formaction,formenctype,formmethod,formnovalidate,formtarget,headers,height,hidden,high,href,hreflang,http-equiv,icon,id,importance,integrity,ismap,itemprop,keytype,kind,label,lang,language,loading,list,loop,low,manifest,max,maxlength,minlength,media,min,multiple,muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,preload,radiogroup,readonly,referrerpolicy,rel,required,reversed,rows,rowspan,sandbox,scope,scoped,selected,shape,size,sizes,slot,span,spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,target,title,translate,type,usemap,value,width,wrap`);
+var isKnownSvgAttr = makeMap(`xmlns,accent-height,accumulate,additive,alignment-baseline,alphabetic,amplitude,arabic-form,ascent,attributeName,attributeType,azimuth,baseFrequency,baseline-shift,baseProfile,bbox,begin,bias,by,calcMode,cap-height,class,clip,clipPathUnits,clip-path,clip-rule,color,color-interpolation,color-interpolation-filters,color-profile,color-rendering,contentScriptType,contentStyleType,crossorigin,cursor,cx,cy,d,decelerate,descent,diffuseConstant,direction,display,divisor,dominant-baseline,dur,dx,dy,edgeMode,elevation,enable-background,end,exponent,fill,fill-opacity,fill-rule,filter,filterRes,filterUnits,flood-color,flood-opacity,font-family,font-size,font-size-adjust,font-stretch,font-style,font-variant,font-weight,format,from,fr,fx,fy,g1,g2,glyph-name,glyph-orientation-horizontal,glyph-orientation-vertical,glyphRef,gradientTransform,gradientUnits,hanging,height,href,hreflang,horiz-adv-x,horiz-origin-x,id,ideographic,image-rendering,in,in2,intercept,k,k1,k2,k3,k4,kernelMatrix,kernelUnitLength,kerning,keyPoints,keySplines,keyTimes,lang,lengthAdjust,letter-spacing,lighting-color,limitingConeAngle,local,marker-end,marker-mid,marker-start,markerHeight,markerUnits,markerWidth,mask,maskContentUnits,maskUnits,mathematical,max,media,method,min,mode,name,numOctaves,offset,opacity,operator,order,orient,orientation,origin,overflow,overline-position,overline-thickness,panose-1,paint-order,path,pathLength,patternContentUnits,patternTransform,patternUnits,ping,pointer-events,points,pointsAtX,pointsAtY,pointsAtZ,preserveAlpha,preserveAspectRatio,primitiveUnits,r,radius,referrerPolicy,refX,refY,rel,rendering-intent,repeatCount,repeatDur,requiredExtensions,requiredFeatures,restart,result,rotate,rx,ry,scale,seed,shape-rendering,slope,spacing,specularConstant,specularExponent,speed,spreadMethod,startOffset,stdDeviation,stemh,stemv,stitchTiles,stop-color,stop-opacity,strikethrough-position,strikethrough-thickness,string,stroke,stroke-dasharray,stroke-dashoffset,stroke-linecap,stroke-linejoin,stroke-miterlimit,stroke-opacity,stroke-width,style,surfaceScale,systemLanguage,tabindex,tableValues,target,targetX,targetY,text-anchor,text-decoration,text-rendering,textLength,to,transform,transform-origin,type,u1,u2,underline-position,underline-thickness,unicode,unicode-bidi,unicode-range,units-per-em,v-alphabetic,v-hanging,v-ideographic,v-mathematical,values,vector-effect,version,vert-adv-y,vert-origin-x,vert-origin-y,viewBox,viewTarget,visibility,width,widths,word-spacing,writing-mode,x,x-height,x1,x2,xChannelSelector,xlink:actuate,xlink:arcrole,xlink:href,xlink:role,xlink:show,xlink:title,xlink:type,xml:base,xml:lang,xml:space,y,y1,y2,yChannelSelector,z,zoomAndPan`);
+function normalizeStyle(value) {
+  if (isArray(value)) {
+    const res = {};
+    for (let i = 0; i < value.length; i++) {
+      const item = value[i];
+      const normalized = isString(item) ? parseStringStyle(item) : normalizeStyle(item);
+      if (normalized) {
+        for (const key in normalized) {
+          res[key] = normalized[key];
+        }
+      }
+    }
+    return res;
+  } else if (isString(value)) {
+    return value;
+  } else if (isObject(value)) {
+    return value;
+  }
+}
+var listDelimiterRE = /;(?![^(]*\))/g;
+var propertyDelimiterRE = /:(.+)/;
+function parseStringStyle(cssText) {
+  const ret = {};
+  cssText.split(listDelimiterRE).forEach((item) => {
+    if (item) {
+      const tmp = item.split(propertyDelimiterRE);
+      tmp.length > 1 && (ret[tmp[0].trim()] = tmp[1].trim());
+    }
+  });
+  return ret;
+}
+function normalizeClass(value) {
+  let res = "";
+  if (isString(value)) {
+    res = value;
+  } else if (isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      const normalized = normalizeClass(value[i]);
+      if (normalized) {
+        res += normalized + " ";
+      }
+    }
+  } else if (isObject(value)) {
+    for (const name in value) {
+      if (value[name]) {
+        res += name + " ";
+      }
+    }
+  }
+  return res.trim();
+}
+function normalizeProps(props) {
+  if (!props)
+    return null;
+  let { class: klass, style } = props;
+  if (klass && !isString(klass)) {
+    props.class = normalizeClass(klass);
+  }
+  if (style) {
+    props.style = normalizeStyle(style);
+  }
+  return props;
+}
+var HTML_TAGS = "html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot";
+var SVG_TAGS = "svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,feDistanceLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,mesh,meshgradient,meshpatch,meshrow,metadata,mpath,path,pattern,polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,text,textPath,title,tspan,unknown,use,view";
+var VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+var isHTMLTag = makeMap(HTML_TAGS);
+var isSVGTag = makeMap(SVG_TAGS);
+var isVoidTag = makeMap(VOID_TAGS);
+function looseCompareArrays(a, b) {
+  if (a.length !== b.length)
+    return false;
+  let equal = true;
+  for (let i = 0; equal && i < a.length; i++) {
+    equal = looseEqual(a[i], b[i]);
+  }
+  return equal;
+}
+function looseEqual(a, b) {
+  if (a === b)
+    return true;
+  let aValidType = isDate(a);
+  let bValidType = isDate(b);
+  if (aValidType || bValidType) {
+    return aValidType && bValidType ? a.getTime() === b.getTime() : false;
+  }
+  aValidType = isArray(a);
+  bValidType = isArray(b);
+  if (aValidType || bValidType) {
+    return aValidType && bValidType ? looseCompareArrays(a, b) : false;
+  }
+  aValidType = isObject(a);
+  bValidType = isObject(b);
+  if (aValidType || bValidType) {
+    if (!aValidType || !bValidType) {
+      return false;
+    }
+    const aKeysCount = Object.keys(a).length;
+    const bKeysCount = Object.keys(b).length;
+    if (aKeysCount !== bKeysCount) {
+      return false;
+    }
+    for (const key in a) {
+      const aHasKey = a.hasOwnProperty(key);
+      const bHasKey = b.hasOwnProperty(key);
+      if (aHasKey && !bHasKey || !aHasKey && bHasKey || !looseEqual(a[key], b[key])) {
+        return false;
+      }
+    }
+  }
+  return String(a) === String(b);
+}
+function looseIndexOf(arr, val) {
+  return arr.findIndex((item) => looseEqual(item, val));
+}
+var toDisplayString = (val) => {
+  return isString(val) ? val : val == null ? "" : isArray(val) || isObject(val) && (val.toString === objectToString || !isFunction(val.toString)) ? JSON.stringify(val, replacer, 2) : String(val);
+};
+var replacer = (_key, val) => {
+  if (val && val.__v_isRef) {
+    return replacer(_key, val.value);
+  } else if (isMap(val)) {
+    return {
+      [`Map(${val.size})`]: [...val.entries()].reduce((entries, [key, val2]) => {
+        entries[`${key} =>`] = val2;
+        return entries;
+      }, {})
+    };
+  } else if (isSet(val)) {
+    return {
+      [`Set(${val.size})`]: [...val.values()]
+    };
+  } else if (isObject(val) && !isArray(val) && !isPlainObject(val)) {
+    return String(val);
+  }
+  return val;
+};
+var EMPTY_OBJ = true ? Object.freeze({}) : {};
+var EMPTY_ARR = true ? Object.freeze([]) : [];
+var NOOP = () => {
+};
+var NO = () => false;
+var onRE = /^on[^a-z]/;
+var isOn = (key) => onRE.test(key);
+var isModelListener = (key) => key.startsWith("onUpdate:");
+var extend = Object.assign;
+var remove = (arr, el) => {
+  const i = arr.indexOf(el);
+  if (i > -1) {
+    arr.splice(i, 1);
+  }
+};
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+var hasOwn = (val, key) => hasOwnProperty.call(val, key);
+var isArray = Array.isArray;
+var isMap = (val) => toTypeString(val) === "[object Map]";
+var isSet = (val) => toTypeString(val) === "[object Set]";
+var isDate = (val) => val instanceof Date;
+var isFunction = (val) => typeof val === "function";
+var isString = (val) => typeof val === "string";
+var isSymbol = (val) => typeof val === "symbol";
+var isObject = (val) => val !== null && typeof val === "object";
+var isPromise = (val) => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+};
+var objectToString = Object.prototype.toString;
+var toTypeString = (value) => objectToString.call(value);
+var toRawType = (value) => {
+  return toTypeString(value).slice(8, -1);
+};
+var isPlainObject = (val) => toTypeString(val) === "[object Object]";
+var isIntegerKey = (key) => isString(key) && key !== "NaN" && key[0] !== "-" && "" + parseInt(key, 10) === key;
+var isReservedProp = makeMap(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted");
+var isBuiltInDirective = makeMap("bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo");
+var cacheStringFunction = (fn) => {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (str) => {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
+};
+var camelizeRE = /-(\w)/g;
+var camelize = cacheStringFunction((str) => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : "");
+});
+var hyphenateRE = /\B([A-Z])/g;
+var hyphenate = cacheStringFunction((str) => str.replace(hyphenateRE, "-$1").toLowerCase());
+var capitalize = cacheStringFunction((str) => str.charAt(0).toUpperCase() + str.slice(1));
+var toHandlerKey = cacheStringFunction((str) => str ? `on${capitalize(str)}` : ``);
+var hasChanged = (value, oldValue) => !Object.is(value, oldValue);
+var invokeArrayFns = (fns, arg) => {
+  for (let i = 0; i < fns.length; i++) {
+    fns[i](arg);
+  }
+};
+var def = (obj, key, value) => {
+  Object.defineProperty(obj, key, {
+    configurable: true,
+    enumerable: false,
+    value
+  });
+};
+var toNumber = (val) => {
+  const n = parseFloat(val);
+  return isNaN(n) ? val : n;
+};
+var _globalThis;
+var getGlobalThis = () => {
+  return _globalThis || (_globalThis = typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {});
+};
+
+export {
+  makeMap,
+  isGloballyWhitelisted,
+  isSpecialBooleanAttr,
+  includeBooleanAttr,
+  normalizeStyle,
+  normalizeClass,
+  normalizeProps,
+  isHTMLTag,
+  isSVGTag,
+  looseEqual,
+  looseIndexOf,
+  toDisplayString,
+  EMPTY_OBJ,
+  EMPTY_ARR,
+  NOOP,
+  NO,
+  isOn,
+  isModelListener,
+  extend,
+  remove,
+  hasOwn,
+  isArray,
+  isMap,
+  isSet,
+  isFunction,
+  isString,
+  isSymbol,
+  isObject,
+  isPromise,
+  toRawType,
+  isPlainObject,
+  isIntegerKey,
+  isReservedProp,
+  isBuiltInDirective,
+  camelize,
+  hyphenate,
+  capitalize,
+  toHandlerKey,
+  hasChanged,
+  invokeArrayFns,
+  def,
+  toNumber,
+  getGlobalThis
+};
+//# sourceMappingURL=chunk-MZSLHFZ6.js.map

docs/.vuepress/.cache/deps/nprogress.js

@@ -0,0 +1,307 @@
+import {
+  __commonJS,
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+} from "./chunk-7EWVPKSC.js";
+
+// node_modules/nprogress/nprogress.js
+var require_nprogress = __commonJS({
+  "node_modules/nprogress/nprogress.js"(exports, module) {
+    init_define_CODE_COPY_LOCALES();
+    init_define_CODE_COPY_OPIONS();
+    init_define_EXTERNAL_LINK_ICON_LOCALES();
+    init_define_MZ_ZOOM_OPTIONS();
+    init_define_SEARCH_HOT_KEYS();
+    init_define_SEARCH_LOCALES();
+    (function(root, factory) {
+      if (typeof define === "function" && define.amd) {
+        define(factory);
+      } else if (typeof exports === "object") {
+        module.exports = factory();
+      } else {
+        root.NProgress = factory();
+      }
+    })(exports, function() {
+      var NProgress = {};
+      NProgress.version = "0.2.0";
+      var Settings = NProgress.settings = {
+        minimum: 0.08,
+        easing: "ease",
+        positionUsing: "",
+        speed: 200,
+        trickle: true,
+        trickleRate: 0.02,
+        trickleSpeed: 800,
+        showSpinner: true,
+        barSelector: '[role="bar"]',
+        spinnerSelector: '[role="spinner"]',
+        parent: "body",
+        template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
+      };
+      NProgress.configure = function(options) {
+        var key, value;
+        for (key in options) {
+          value = options[key];
+          if (value !== void 0 && options.hasOwnProperty(key))
+            Settings[key] = value;
+        }
+        return this;
+      };
+      NProgress.status = null;
+      NProgress.set = function(n) {
+        var started = NProgress.isStarted();
+        n = clamp(n, Settings.minimum, 1);
+        NProgress.status = n === 1 ? null : n;
+        var progress = NProgress.render(!started), bar = progress.querySelector(Settings.barSelector), speed = Settings.speed, ease = Settings.easing;
+        progress.offsetWidth;
+        queue(function(next) {
+          if (Settings.positionUsing === "")
+            Settings.positionUsing = NProgress.getPositioningCSS();
+          css(bar, barPositionCSS(n, speed, ease));
+          if (n === 1) {
+            css(progress, {
+              transition: "none",
+              opacity: 1
+            });
+            progress.offsetWidth;
+            setTimeout(function() {
+              css(progress, {
+                transition: "all " + speed + "ms linear",
+                opacity: 0
+              });
+              setTimeout(function() {
+                NProgress.remove();
+                next();
+              }, speed);
+            }, speed);
+          } else {
+            setTimeout(next, speed);
+          }
+        });
+        return this;
+      };
+      NProgress.isStarted = function() {
+        return typeof NProgress.status === "number";
+      };
+      NProgress.start = function() {
+        if (!NProgress.status)
+          NProgress.set(0);
+        var work = function() {
+          setTimeout(function() {
+            if (!NProgress.status)
+              return;
+            NProgress.trickle();
+            work();
+          }, Settings.trickleSpeed);
+        };
+        if (Settings.trickle)
+          work();
+        return this;
+      };
+      NProgress.done = function(force) {
+        if (!force && !NProgress.status)
+          return this;
+        return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
+      };
+      NProgress.inc = function(amount) {
+        var n = NProgress.status;
+        if (!n) {
+          return NProgress.start();
+        } else {
+          if (typeof amount !== "number") {
+            amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
+          }
+          n = clamp(n + amount, 0, 0.994);
+          return NProgress.set(n);
+        }
+      };
+      NProgress.trickle = function() {
+        return NProgress.inc(Math.random() * Settings.trickleRate);
+      };
+      (function() {
+        var initial = 0, current = 0;
+        NProgress.promise = function($promise) {
+          if (!$promise || $promise.state() === "resolved") {
+            return this;
+          }
+          if (current === 0) {
+            NProgress.start();
+          }
+          initial++;
+          current++;
+          $promise.always(function() {
+            current--;
+            if (current === 0) {
+              initial = 0;
+              NProgress.done();
+            } else {
+              NProgress.set((initial - current) / initial);
+            }
+          });
+          return this;
+        };
+      })();
+      NProgress.render = function(fromStart) {
+        if (NProgress.isRendered())
+          return document.getElementById("nprogress");
+        addClass(document.documentElement, "nprogress-busy");
+        var progress = document.createElement("div");
+        progress.id = "nprogress";
+        progress.innerHTML = Settings.template;
+        var bar = progress.querySelector(Settings.barSelector), perc = fromStart ? "-100" : toBarPerc(NProgress.status || 0), parent = document.querySelector(Settings.parent), spinner;
+        css(bar, {
+          transition: "all 0 linear",
+          transform: "translate3d(" + perc + "%,0,0)"
+        });
+        if (!Settings.showSpinner) {
+          spinner = progress.querySelector(Settings.spinnerSelector);
+          spinner && removeElement(spinner);
+        }
+        if (parent != document.body) {
+          addClass(parent, "nprogress-custom-parent");
+        }
+        parent.appendChild(progress);
+        return progress;
+      };
+      NProgress.remove = function() {
+        removeClass(document.documentElement, "nprogress-busy");
+        removeClass(document.querySelector(Settings.parent), "nprogress-custom-parent");
+        var progress = document.getElementById("nprogress");
+        progress && removeElement(progress);
+      };
+      NProgress.isRendered = function() {
+        return !!document.getElementById("nprogress");
+      };
+      NProgress.getPositioningCSS = function() {
+        var bodyStyle = document.body.style;
+        var vendorPrefix = "WebkitTransform" in bodyStyle ? "Webkit" : "MozTransform" in bodyStyle ? "Moz" : "msTransform" in bodyStyle ? "ms" : "OTransform" in bodyStyle ? "O" : "";
+        if (vendorPrefix + "Perspective" in bodyStyle) {
+          return "translate3d";
+        } else if (vendorPrefix + "Transform" in bodyStyle) {
+          return "translate";
+        } else {
+          return "margin";
+        }
+      };
+      function clamp(n, min, max) {
+        if (n < min)
+          return min;
+        if (n > max)
+          return max;
+        return n;
+      }
+      function toBarPerc(n) {
+        return (-1 + n) * 100;
+      }
+      function barPositionCSS(n, speed, ease) {
+        var barCSS;
+        if (Settings.positionUsing === "translate3d") {
+          barCSS = { transform: "translate3d(" + toBarPerc(n) + "%,0,0)" };
+        } else if (Settings.positionUsing === "translate") {
+          barCSS = { transform: "translate(" + toBarPerc(n) + "%,0)" };
+        } else {
+          barCSS = { "margin-left": toBarPerc(n) + "%" };
+        }
+        barCSS.transition = "all " + speed + "ms " + ease;
+        return barCSS;
+      }
+      var queue = function() {
+        var pending = [];
+        function next() {
+          var fn = pending.shift();
+          if (fn) {
+            fn(next);
+          }
+        }
+        return function(fn) {
+          pending.push(fn);
+          if (pending.length == 1)
+            next();
+        };
+      }();
+      var css = function() {
+        var cssPrefixes = ["Webkit", "O", "Moz", "ms"], cssProps = {};
+        function camelCase(string) {
+          return string.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function(match, letter) {
+            return letter.toUpperCase();
+          });
+        }
+        function getVendorProp(name) {
+          var style = document.body.style;
+          if (name in style)
+            return name;
+          var i = cssPrefixes.length, capName = name.charAt(0).toUpperCase() + name.slice(1), vendorName;
+          while (i--) {
+            vendorName = cssPrefixes[i] + capName;
+            if (vendorName in style)
+              return vendorName;
+          }
+          return name;
+        }
+        function getStyleProp(name) {
+          name = camelCase(name);
+          return cssProps[name] || (cssProps[name] = getVendorProp(name));
+        }
+        function applyCss(element, prop, value) {
+          prop = getStyleProp(prop);
+          element.style[prop] = value;
+        }
+        return function(element, properties) {
+          var args = arguments, prop, value;
+          if (args.length == 2) {
+            for (prop in properties) {
+              value = properties[prop];
+              if (value !== void 0 && properties.hasOwnProperty(prop))
+                applyCss(element, prop, value);
+            }
+          } else {
+            applyCss(element, args[1], args[2]);
+          }
+        };
+      }();
+      function hasClass(element, name) {
+        var list = typeof element == "string" ? element : classList(element);
+        return list.indexOf(" " + name + " ") >= 0;
+      }
+      function addClass(element, name) {
+        var oldList = classList(element), newList = oldList + name;
+        if (hasClass(oldList, name))
+          return;
+        element.className = newList.substring(1);
+      }
+      function removeClass(element, name) {
+        var oldList = classList(element), newList;
+        if (!hasClass(element, name))
+          return;
+        newList = oldList.replace(" " + name + " ", " ");
+        element.className = newList.substring(1, newList.length - 1);
+      }
+      function classList(element) {
+        return (" " + (element.className || "") + " ").replace(/\s+/gi, " ");
+      }
+      function removeElement(element) {
+        element && element.parentNode && element.parentNode.removeChild(element);
+      }
+      return NProgress;
+    });
+  }
+});
+
+// dep:nprogress
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+var nprogress_default = require_nprogress();
+export {
+  nprogress_default as default
+};
+/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
+ * @license MIT */
+//# sourceMappingURL=nprogress.js.map

docs/.vuepress/.cache/deps/package.json

@@ -0,0 +1 @@
+{"type":"module"}

docs/.vuepress/.cache/deps/vue.js

@@ -0,0 +1,311 @@
+import {
+  BaseTransition,
+  Comment,
+  EffectScope,
+  Fragment,
+  KeepAlive,
+  ReactiveEffect,
+  Static,
+  Suspense,
+  Teleport,
+  Text,
+  Transition,
+  TransitionGroup,
+  VueElement,
+  callWithAsyncErrorHandling,
+  callWithErrorHandling,
+  cloneVNode,
+  compatUtils,
+  computed,
+  createApp,
+  createBaseVNode,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createHydrationRenderer,
+  createPropsRestProxy,
+  createRenderer,
+  createSSRApp,
+  createSlots,
+  createStaticVNode,
+  createTextVNode,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
+  defineComponent,
+  defineCustomElement,
+  defineEmits,
+  defineExpose,
+  defineProps,
+  defineSSRCustomElement,
+  devtools,
+  effect,
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  getTransitionRawChildren,
+  guardReactiveProps,
+  h,
+  handleError,
+  hydrate,
+  initCustomFormatter,
+  initDirectivesForSSR,
+  inject,
+  isMemoSame,
+  isProxy,
+  isReactive,
+  isReadonly,
+  isRef,
+  isRuntimeOnly,
+  isShallow,
+  isVNode,
+  markRaw,
+  mergeDefaults,
+  mergeProps,
+  nextTick,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onScopeDispose,
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
+  openBlock,
+  popScopeId,
+  provide,
+  proxyRefs,
+  pushScopeId,
+  queuePostFlushCb,
+  reactive,
+  readonly,
+  ref,
+  registerRuntimeCompiler,
+  render,
+  renderList,
+  renderSlot,
+  resolveComponent,
+  resolveDirective,
+  resolveDynamicComponent,
+  resolveFilter,
+  resolveTransitionHooks,
+  setBlockTracking,
+  setDevtoolsHook,
+  setTransitionHooks,
+  shallowReactive,
+  shallowReadonly,
+  shallowRef,
+  ssrContextKey,
+  ssrUtils,
+  stop,
+  toHandlers,
+  toRaw,
+  toRef,
+  toRefs,
+  transformVNodeArgs,
+  triggerRef,
+  unref,
+  useAttrs,
+  useCssModule,
+  useCssVars,
+  useSSRContext,
+  useSlots,
+  useTransitionState,
+  vModelCheckbox,
+  vModelDynamic,
+  vModelRadio,
+  vModelSelect,
+  vModelText,
+  vShow,
+  version,
+  warn,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withAsyncContext,
+  withCtx,
+  withDefaults,
+  withDirectives,
+  withKeys,
+  withMemo,
+  withModifiers,
+  withScopeId
+} from "./chunk-CCMLXPK7.js";
+import {
+  camelize,
+  capitalize,
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  toDisplayString,
+  toHandlerKey
+} from "./chunk-MZSLHFZ6.js";
+import {
+  init_define_CODE_COPY_LOCALES,
+  init_define_CODE_COPY_OPIONS,
+  init_define_EXTERNAL_LINK_ICON_LOCALES,
+  init_define_MZ_ZOOM_OPTIONS,
+  init_define_SEARCH_HOT_KEYS,
+  init_define_SEARCH_LOCALES
+} from "./chunk-7EWVPKSC.js";
+
+// dep:vue
+init_define_CODE_COPY_LOCALES();
+init_define_CODE_COPY_OPIONS();
+init_define_EXTERNAL_LINK_ICON_LOCALES();
+init_define_MZ_ZOOM_OPTIONS();
+init_define_SEARCH_HOT_KEYS();
+init_define_SEARCH_LOCALES();
+export {
+  BaseTransition,
+  Comment,
+  EffectScope,
+  Fragment,
+  KeepAlive,
+  ReactiveEffect,
+  Static,
+  Suspense,
+  Teleport,
+  Text,
+  Transition,
+  TransitionGroup,
+  VueElement,
+  callWithAsyncErrorHandling,
+  callWithErrorHandling,
+  camelize,
+  capitalize,
+  cloneVNode,
+  compatUtils,
+  computed,
+  createApp,
+  createBlock,
+  createCommentVNode,
+  createElementBlock,
+  createBaseVNode as createElementVNode,
+  createHydrationRenderer,
+  createPropsRestProxy,
+  createRenderer,
+  createSSRApp,
+  createSlots,
+  createStaticVNode,
+  createTextVNode,
+  createVNode,
+  customRef,
+  defineAsyncComponent,
+  defineComponent,
+  defineCustomElement,
+  defineEmits,
+  defineExpose,
+  defineProps,
+  defineSSRCustomElement,
+  devtools,
+  effect,
+  effectScope,
+  getCurrentInstance,
+  getCurrentScope,
+  getTransitionRawChildren,
+  guardReactiveProps,
+  h,
+  handleError,
+  hydrate,
+  initCustomFormatter,
+  initDirectivesForSSR,
+  inject,
+  isMemoSame,
+  isProxy,
+  isReactive,
+  isReadonly,
+  isRef,
+  isRuntimeOnly,
+  isShallow,
+  isVNode,
+  markRaw,
+  mergeDefaults,
+  mergeProps,
+  nextTick,
+  normalizeClass,
+  normalizeProps,
+  normalizeStyle,
+  onActivated,
+  onBeforeMount,
+  onBeforeUnmount,
+  onBeforeUpdate,
+  onDeactivated,
+  onErrorCaptured,
+  onMounted,
+  onRenderTracked,
+  onRenderTriggered,
+  onScopeDispose,
+  onServerPrefetch,
+  onUnmounted,
+  onUpdated,
+  openBlock,
+  popScopeId,
+  provide,
+  proxyRefs,
+  pushScopeId,
+  queuePostFlushCb,
+  reactive,
+  readonly,
+  ref,
+  registerRuntimeCompiler,
+  render,
+  renderList,
+  renderSlot,
+  resolveComponent,
+  resolveDirective,
+  resolveDynamicComponent,
+  resolveFilter,
+  resolveTransitionHooks,
+  setBlockTracking,
+  setDevtoolsHook,
+  setTransitionHooks,
+  shallowReactive,
+  shallowReadonly,
+  shallowRef,
+  ssrContextKey,
+  ssrUtils,
+  stop,
+  toDisplayString,
+  toHandlerKey,
+  toHandlers,
+  toRaw,
+  toRef,
+  toRefs,
+  transformVNodeArgs,
+  triggerRef,
+  unref,
+  useAttrs,
+  useCssModule,
+  useCssVars,
+  useSSRContext,
+  useSlots,
+  useTransitionState,
+  vModelCheckbox,
+  vModelDynamic,
+  vModelRadio,
+  vModelSelect,
+  vModelText,
+  vShow,
+  version,
+  warn,
+  watch,
+  watchEffect,
+  watchPostEffect,
+  watchSyncEffect,
+  withAsyncContext,
+  withCtx,
+  withDefaults,
+  withDirectives,
+  withKeys,
+  withMemo,
+  withModifiers,
+  withScopeId
+};
+//# sourceMappingURL=vue.js.map

docs/.vuepress/.cache/deps/vue.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["dep:vue"],
+  "sourcesContent": ["\nexport * from \"../../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js\""],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

docs/.vuepress/.temp/internal/clientAppEnhances.js

@@ -0,0 +1,15 @@
+import clientAppEnhance0 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-medium-zoom/lib/client/clientAppEnhance.js'
+import clientAppEnhance1 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-theme-data/lib/client/clientAppEnhance.js'
+import clientAppEnhance2 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/clientAppEnhance.js'
+import clientAppEnhance3 from '/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/sass-palette/load-hope.js'
+import clientAppEnhance4 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-external-link-icon/lib/client/clientAppEnhance.js'
+import clientAppEnhance5 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-search/lib/client/clientAppEnhance.js'
+
+export const clientAppEnhances = [
+  clientAppEnhance0,
+  clientAppEnhance1,
+  clientAppEnhance2,
+  clientAppEnhance3,
+  clientAppEnhance4,
+  clientAppEnhance5,
+]

docs/.vuepress/.temp/internal/clientAppRootComponents.js

@@ -0,0 +1,5 @@
+import clientAppRootComponent0 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-back-to-top/lib/client/components/BackToTop.js'
+
+export const clientAppRootComponents = [
+  clientAppRootComponent0,
+]

docs/.vuepress/.temp/internal/clientAppSetups.js

@@ -0,0 +1,11 @@
+import clientAppSetup0 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-active-header-links/lib/client/clientAppSetup.js'
+import clientAppSetup1 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/plugin-nprogress/lib/client/clientAppSetup.js'
+import clientAppSetup2 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/clientAppSetup.js'
+import clientAppSetup3 from '/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/vuepress-plugin-copy-code2/lib/client/appSetup.js'
+
+export const clientAppSetups = [
+  clientAppSetup0,
+  clientAppSetup1,
+  clientAppSetup2,
+  clientAppSetup3,
+]

docs/.vuepress/.temp/internal/layoutComponents.js

@@ -0,0 +1,6 @@
+import { defineAsyncComponent } from 'vue'
+
+export const layoutComponents = {
+  "404": defineAsyncComponent(() => import("/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/layouts/404.vue")),
+  "Layout": defineAsyncComponent(() => import("/Users/taylorxie/Downloads/课件/webpack_docs/node_modules/@vuepress/theme-default/lib/client/layouts/Layout.vue")),
+}

docs/.vuepress/.temp/internal/pagesComponents.js

@@ -0,0 +1,80 @@
+import { defineAsyncComponent } from 'vue'
+
+export const pagesComponents = {
+  // path: /
+  "v-8daa1a0e": defineAsyncComponent(() => import(/* webpackChunkName: "v-8daa1a0e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/index.html.vue")),
+  // path: /base/
+  "v-1455d425": defineAsyncComponent(() => import(/* webpackChunkName: "v-1455d425" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/index.html.vue")),
+  // path: /base/base.html
+  "v-a6cc4bba": defineAsyncComponent(() => import(/* webpackChunkName: "v-a6cc4bba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/base.html.vue")),
+  // path: /base/clean.html
+  "v-21f1ba15": defineAsyncComponent(() => import(/* webpackChunkName: "v-21f1ba15" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/clean.html.vue")),
+  // path: /base/config.html
+  "v-e703ecdc": defineAsyncComponent(() => import(/* webpackChunkName: "v-e703ecdc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/config.html.vue")),
+  // path: /base/css.html
+  "v-80c5304a": defineAsyncComponent(() => import(/* webpackChunkName: "v-80c5304a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/css.html.vue")),
+  // path: /base/development.html
+  "v-34029aa3": defineAsyncComponent(() => import(/* webpackChunkName: "v-34029aa3" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/development.html.vue")),
+  // path: /base/font.html
+  "v-85d4d936": defineAsyncComponent(() => import(/* webpackChunkName: "v-85d4d936" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/font.html.vue")),
+  // path: /base/html.html
+  "v-ab115cee": defineAsyncComponent(() => import(/* webpackChunkName: "v-ab115cee" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/html.html.vue")),
+  // path: /base/image.html
+  "v-03183b7a": defineAsyncComponent(() => import(/* webpackChunkName: "v-03183b7a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/image.html.vue")),
+  // path: /base/javascript.html
+  "v-0bd200c7": defineAsyncComponent(() => import(/* webpackChunkName: "v-0bd200c7" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/javascript.html.vue")),
+  // path: /base/minifyHtml.html
+  "v-50d92e02": defineAsyncComponent(() => import(/* webpackChunkName: "v-50d92e02" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/minifyHtml.html.vue")),
+  // path: /base/optimizeCss.html
+  "v-65f7fcd8": defineAsyncComponent(() => import(/* webpackChunkName: "v-65f7fcd8" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/optimizeCss.html.vue")),
+  // path: /base/other.html
+  "v-499655ae": defineAsyncComponent(() => import(/* webpackChunkName: "v-499655ae" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/other.html.vue")),
+  // path: /base/output.html
+  "v-5a4f3333": defineAsyncComponent(() => import(/* webpackChunkName: "v-5a4f3333" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/output.html.vue")),
+  // path: /base/production.html
+  "v-6940ce0a": defineAsyncComponent(() => import(/* webpackChunkName: "v-6940ce0a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/production.html.vue")),
+  // path: /base/server.html
+  "v-5e3bb631": defineAsyncComponent(() => import(/* webpackChunkName: "v-5e3bb631" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/server.html.vue")),
+  // path: /base/summary.html
+  "v-ce2194d0": defineAsyncComponent(() => import(/* webpackChunkName: "v-ce2194d0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/summary.html.vue")),
+  // path: /intro/
+  "v-f9e30908": defineAsyncComponent(() => import(/* webpackChunkName: "v-f9e30908" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/index.html.vue")),
+  // path: /intro/asset.html
+  "v-0670fc65": defineAsyncComponent(() => import(/* webpackChunkName: "v-0670fc65" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/asset.html.vue")),
+  // path: /intro/group.html
+  "v-581e5b94": defineAsyncComponent(() => import(/* webpackChunkName: "v-581e5b94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/group.html.vue")),
+  // path: /intro/learn.html
+  "v-7d0ce4de": defineAsyncComponent(() => import(/* webpackChunkName: "v-7d0ce4de" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/learn.html.vue")),
+  // path: /intro/pre.html
+  "v-10b408dc": defineAsyncComponent(() => import(/* webpackChunkName: "v-10b408dc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/pre.html.vue")),
+  // path: /origin/
+  "v-2259a8b0": defineAsyncComponent(() => import(/* webpackChunkName: "v-2259a8b0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/index.html.vue")),
+  // path: /origin/loader.html
+  "v-1cfd2df6": defineAsyncComponent(() => import(/* webpackChunkName: "v-1cfd2df6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/loader.html.vue")),
+  // path: /origin/plugin.html
+  "v-2d7562d6": defineAsyncComponent(() => import(/* webpackChunkName: "v-2d7562d6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/plugin.html.vue")),
+  // path: /origin/summary.html
+  "v-860cdcba": defineAsyncComponent(() => import(/* webpackChunkName: "v-860cdcba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/summary.html.vue")),
+  // path: /senior/
+  "v-3fe9ea34": defineAsyncComponent(() => import(/* webpackChunkName: "v-3fe9ea34" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/index.html.vue")),
+  // path: /senior/enhanceExperience.html
+  "v-7964f787": defineAsyncComponent(() => import(/* webpackChunkName: "v-7964f787" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/enhanceExperience.html.vue")),
+  // path: /senior/liftingSpeed.html
+  "v-7b858f23": defineAsyncComponent(() => import(/* webpackChunkName: "v-7b858f23" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/liftingSpeed.html.vue")),
+  // path: /senior/optimizePerformance.html
+  "v-5489448c": defineAsyncComponent(() => import(/* webpackChunkName: "v-5489448c" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/optimizePerformance.html.vue")),
+  // path: /senior/reduceVolume.html
+  "v-5460e2da": defineAsyncComponent(() => import(/* webpackChunkName: "v-5460e2da" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/reduceVolume.html.vue")),
+  // path: /senior/summary.html
+  "v-1d695a4e": defineAsyncComponent(() => import(/* webpackChunkName: "v-1d695a4e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/summary.html.vue")),
+  // path: /project/
+  "v-c9bbfba2": defineAsyncComponent(() => import(/* webpackChunkName: "v-c9bbfba2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/index.html.vue")),
+  // path: /project/react-cli.html
+  "v-61413f94": defineAsyncComponent(() => import(/* webpackChunkName: "v-61413f94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/react-cli.html.vue")),
+  // path: /project/summary.html
+  "v-2a04a4a2": defineAsyncComponent(() => import(/* webpackChunkName: "v-2a04a4a2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/summary.html.vue")),
+  // path: /project/vue-cli.html
+  "v-04c1b7cf": defineAsyncComponent(() => import(/* webpackChunkName: "v-04c1b7cf" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/vue-cli.html.vue")),
+  // path: /404.html
+  "v-3706649a": defineAsyncComponent(() => import(/* webpackChunkName: "v-3706649a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/404.html.vue")),
+}

docs/.vuepress/.temp/internal/pagesData.js

@@ -0,0 +1,78 @@
+export const pagesData = {
+  // path: /
+  "v-8daa1a0e": () => import(/* webpackChunkName: "v-8daa1a0e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/index.html.js").then(({ data }) => data),
+  // path: /base/
+  "v-1455d425": () => import(/* webpackChunkName: "v-1455d425" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/index.html.js").then(({ data }) => data),
+  // path: /base/base.html
+  "v-a6cc4bba": () => import(/* webpackChunkName: "v-a6cc4bba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/base.html.js").then(({ data }) => data),
+  // path: /base/clean.html
+  "v-21f1ba15": () => import(/* webpackChunkName: "v-21f1ba15" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/clean.html.js").then(({ data }) => data),
+  // path: /base/config.html
+  "v-e703ecdc": () => import(/* webpackChunkName: "v-e703ecdc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/config.html.js").then(({ data }) => data),
+  // path: /base/css.html
+  "v-80c5304a": () => import(/* webpackChunkName: "v-80c5304a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/css.html.js").then(({ data }) => data),
+  // path: /base/development.html
+  "v-34029aa3": () => import(/* webpackChunkName: "v-34029aa3" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/development.html.js").then(({ data }) => data),
+  // path: /base/font.html
+  "v-85d4d936": () => import(/* webpackChunkName: "v-85d4d936" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/font.html.js").then(({ data }) => data),
+  // path: /base/html.html
+  "v-ab115cee": () => import(/* webpackChunkName: "v-ab115cee" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/html.html.js").then(({ data }) => data),
+  // path: /base/image.html
+  "v-03183b7a": () => import(/* webpackChunkName: "v-03183b7a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/image.html.js").then(({ data }) => data),
+  // path: /base/javascript.html
+  "v-0bd200c7": () => import(/* webpackChunkName: "v-0bd200c7" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/javascript.html.js").then(({ data }) => data),
+  // path: /base/minifyHtml.html
+  "v-50d92e02": () => import(/* webpackChunkName: "v-50d92e02" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/minifyHtml.html.js").then(({ data }) => data),
+  // path: /base/optimizeCss.html
+  "v-65f7fcd8": () => import(/* webpackChunkName: "v-65f7fcd8" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/optimizeCss.html.js").then(({ data }) => data),
+  // path: /base/other.html
+  "v-499655ae": () => import(/* webpackChunkName: "v-499655ae" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/other.html.js").then(({ data }) => data),
+  // path: /base/output.html
+  "v-5a4f3333": () => import(/* webpackChunkName: "v-5a4f3333" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/output.html.js").then(({ data }) => data),
+  // path: /base/production.html
+  "v-6940ce0a": () => import(/* webpackChunkName: "v-6940ce0a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/production.html.js").then(({ data }) => data),
+  // path: /base/server.html
+  "v-5e3bb631": () => import(/* webpackChunkName: "v-5e3bb631" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/server.html.js").then(({ data }) => data),
+  // path: /base/summary.html
+  "v-ce2194d0": () => import(/* webpackChunkName: "v-ce2194d0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/base/summary.html.js").then(({ data }) => data),
+  // path: /intro/
+  "v-f9e30908": () => import(/* webpackChunkName: "v-f9e30908" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/index.html.js").then(({ data }) => data),
+  // path: /intro/asset.html
+  "v-0670fc65": () => import(/* webpackChunkName: "v-0670fc65" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/asset.html.js").then(({ data }) => data),
+  // path: /intro/group.html
+  "v-581e5b94": () => import(/* webpackChunkName: "v-581e5b94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/group.html.js").then(({ data }) => data),
+  // path: /intro/learn.html
+  "v-7d0ce4de": () => import(/* webpackChunkName: "v-7d0ce4de" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/learn.html.js").then(({ data }) => data),
+  // path: /intro/pre.html
+  "v-10b408dc": () => import(/* webpackChunkName: "v-10b408dc" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/intro/pre.html.js").then(({ data }) => data),
+  // path: /origin/
+  "v-2259a8b0": () => import(/* webpackChunkName: "v-2259a8b0" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/index.html.js").then(({ data }) => data),
+  // path: /origin/loader.html
+  "v-1cfd2df6": () => import(/* webpackChunkName: "v-1cfd2df6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/loader.html.js").then(({ data }) => data),
+  // path: /origin/plugin.html
+  "v-2d7562d6": () => import(/* webpackChunkName: "v-2d7562d6" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/plugin.html.js").then(({ data }) => data),
+  // path: /origin/summary.html
+  "v-860cdcba": () => import(/* webpackChunkName: "v-860cdcba" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/origin/summary.html.js").then(({ data }) => data),
+  // path: /senior/
+  "v-3fe9ea34": () => import(/* webpackChunkName: "v-3fe9ea34" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/index.html.js").then(({ data }) => data),
+  // path: /senior/enhanceExperience.html
+  "v-7964f787": () => import(/* webpackChunkName: "v-7964f787" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/enhanceExperience.html.js").then(({ data }) => data),
+  // path: /senior/liftingSpeed.html
+  "v-7b858f23": () => import(/* webpackChunkName: "v-7b858f23" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/liftingSpeed.html.js").then(({ data }) => data),
+  // path: /senior/optimizePerformance.html
+  "v-5489448c": () => import(/* webpackChunkName: "v-5489448c" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/optimizePerformance.html.js").then(({ data }) => data),
+  // path: /senior/reduceVolume.html
+  "v-5460e2da": () => import(/* webpackChunkName: "v-5460e2da" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/reduceVolume.html.js").then(({ data }) => data),
+  // path: /senior/summary.html
+  "v-1d695a4e": () => import(/* webpackChunkName: "v-1d695a4e" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/senior/summary.html.js").then(({ data }) => data),
+  // path: /project/
+  "v-c9bbfba2": () => import(/* webpackChunkName: "v-c9bbfba2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/index.html.js").then(({ data }) => data),
+  // path: /project/react-cli.html
+  "v-61413f94": () => import(/* webpackChunkName: "v-61413f94" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/react-cli.html.js").then(({ data }) => data),
+  // path: /project/summary.html
+  "v-2a04a4a2": () => import(/* webpackChunkName: "v-2a04a4a2" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/summary.html.js").then(({ data }) => data),
+  // path: /project/vue-cli.html
+  "v-04c1b7cf": () => import(/* webpackChunkName: "v-04c1b7cf" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/project/vue-cli.html.js").then(({ data }) => data),
+  // path: /404.html
+  "v-3706649a": () => import(/* webpackChunkName: "v-3706649a" */"/Users/taylorxie/Downloads/课件/webpack_docs/docs/.vuepress/.temp/pages/404.html.js").then(({ data }) => data),
+}

docs/.vuepress/.temp/internal/pagesRoutes.js

@@ -0,0 +1,67 @@
+import { Vuepress } from '@vuepress/client/lib/components/Vuepress'
+
+const routeItems = [
+  ["v-8daa1a0e","/",{"title":"首页"},["/index.html","/README.md"]],
+  ["v-1455d425","/base/",{"title":"前言"},["/base/index.html","/base/README.md"]],
+  ["v-a6cc4bba","/base/base.html",{"title":"基本使用"},["/base/base","/base/base.md"]],
+  ["v-21f1ba15","/base/clean.html",{"title":"自动清空上次打包资源"},["/base/clean","/base/clean.md"]],
+  ["v-e703ecdc","/base/config.html",{"title":"基本配置"},["/base/config","/base/config.md"]],
+  ["v-80c5304a","/base/css.html",{"title":"处理样式资源"},["/base/css","/base/css.md"]],
+  ["v-34029aa3","/base/development.html",{"title":"开发模式介绍"},["/base/development","/base/development.md"]],
+  ["v-85d4d936","/base/font.html",{"title":"处理字体图标资源"},["/base/font","/base/font.md"]],
+  ["v-ab115cee","/base/html.html",{"title":"处理 Html 资源"},["/base/html","/base/html.md"]],
+  ["v-03183b7a","/base/image.html",{"title":"处理图片资源"},["/base/image","/base/image.md"]],
+  ["v-0bd200c7","/base/javascript.html",{"title":"处理 js 资源"},["/base/javascript","/base/javascript.md"]],
+  ["v-50d92e02","/base/minifyHtml.html",{"title":"html 压缩"},["/base/minifyHtml","/base/minifyHtml.md"]],
+  ["v-65f7fcd8","/base/optimizeCss.html",{"title":"Css 处理"},["/base/optimizeCss","/base/optimizeCss.md"]],
+  ["v-499655ae","/base/other.html",{"title":"处理其他资源"},["/base/other","/base/other.md"]],
+  ["v-5a4f3333","/base/output.html",{"title":"修改输出资源的名称和路径"},["/base/output","/base/output.md"]],
+  ["v-6940ce0a","/base/production.html",{"title":"生产模式介绍"},["/base/production","/base/production.md"]],
+  ["v-5e3bb631","/base/server.html",{"title":"开发服务器&自动化"},["/base/server","/base/server.md"]],
+  ["v-ce2194d0","/base/summary.html",{"title":"总结"},["/base/summary","/base/summary.md"]],
+  ["v-f9e30908","/intro/",{"title":"依赖环境"},["/intro/index.html","/intro/README.md"]],
+  ["v-0670fc65","/intro/asset.html",{"title":"学习资料"},["/intro/asset","/intro/asset.md"]],
+  ["v-581e5b94","/intro/group.html",{"title":"适合群体"},["/intro/group","/intro/group.md"]],
+  ["v-7d0ce4de","/intro/learn.html",{"title":"我能学到什么"},["/intro/learn","/intro/learn.md"]],
+  ["v-10b408dc","/intro/pre.html",{"title":"前置知识"},["/intro/pre","/intro/pre.md"]],
+  ["v-2259a8b0","/origin/",{"title":"介绍"},["/origin/index.html","/origin/README.md"]],
+  ["v-1cfd2df6","/origin/loader.html",{"title":"Loader 原理"},["/origin/loader","/origin/loader.md"]],
+  ["v-2d7562d6","/origin/plugin.html",{"title":"Plugin 原理"},["/origin/plugin","/origin/plugin.md"]],
+  ["v-860cdcba","/origin/summary.html",{"title":"总结"},["/origin/summary","/origin/summary.md"]],
+  ["v-3fe9ea34","/senior/",{"title":"介绍"},["/senior/index.html","/senior/README.md"]],
+  ["v-7964f787","/senior/enhanceExperience.html",{"title":"提升开发体验"},["/senior/enhanceExperience","/senior/enhanceExperience.md"]],
+  ["v-7b858f23","/senior/liftingSpeed.html",{"title":"提升打包构建速度"},["/senior/liftingSpeed","/senior/liftingSpeed.md"]],
+  ["v-5489448c","/senior/optimizePerformance.html",{"title":"优化代码运行性能"},["/senior/optimizePerformance","/senior/optimizePerformance.md"]],
+  ["v-5460e2da","/senior/reduceVolume.html",{"title":"减少代码体积"},["/senior/reduceVolume","/senior/reduceVolume.md"]],
+  ["v-1d695a4e","/senior/summary.html",{"title":"总结"},["/senior/summary","/senior/summary.md"]],
+  ["v-c9bbfba2","/project/",{"title":"介绍"},["/project/index.html","/project/README.md"]],
+  ["v-61413f94","/project/react-cli.html",{"title":"React 脚手架"},["/project/react-cli","/project/react-cli.md"]],
+  ["v-2a04a4a2","/project/summary.html",{"title":"总结"},["/project/summary","/project/summary.md"]],
+  ["v-04c1b7cf","/project/vue-cli.html",{"title":"Vue 脚手架"},["/project/vue-cli","/project/vue-cli.md"]],
+  ["v-3706649a","/404.html",{"title":""},["/404"]],
+]
+
+export const pagesRoutes = routeItems.reduce(
+  (result, [name, path, meta, redirects]) => {
+    result.push(
+      {
+        name,
+        path,
+        component: Vuepress,
+        meta,
+      },
+      ...redirects.map((item) => ({
+        path: item,
+        redirect: path,
+      }))
+    )
+    return result
+  },
+  [
+    {
+      name: "404",
+      path: "/:catchAll(.*)",
+      component: Vuepress,
+    }
+  ]
+)

docs/.vuepress/.temp/internal/siteData.js

@@ -0,0 +1,29 @@
+export const siteData = {
+  "base": "/webpack5-docs/",
+  "lang": "zh-CN",
+  "title": "尚硅谷 Web 前端之 Webpack5 教程",
+  "description": "Webpack5从小白到大神",
+  "head": [
+    [
+      "link",
+      {
+        "rel": "icon",
+        "href": "/imgs/favicon.ico"
+      }
+    ]
+  ],
+  "locales": {}
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updateSiteData) {
+    __VUE_HMR_RUNTIME__.updateSiteData(siteData)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ siteData }) => {
+    __VUE_HMR_RUNTIME__.updateSiteData(siteData)
+  })
+}

docs/.vuepress/.temp/internal/themeData.js

@@ -0,0 +1,137 @@
+export const themeData = {
+  "logo": "/imgs/favicon.ico",
+  "lastUpdated": false,
+  "navbar": [
+    {
+      "text": "课程介绍",
+      "link": "/intro/"
+    },
+    {
+      "text": "基础",
+      "link": "/base/"
+    },
+    {
+      "text": "高级",
+      "link": "/senior/"
+    },
+    {
+      "text": "项目",
+      "link": "/project/"
+    },
+    {
+      "text": "原理",
+      "link": "/origin/"
+    }
+  ],
+  "sidebar": {
+    "/intro/": [
+      {
+        "text": "课程介绍",
+        "children": [
+          "/intro/README.md",
+          "/intro/pre.md",
+          "/intro/group.md",
+          "/intro/learn.md",
+          "/intro/asset.md"
+        ]
+      }
+    ],
+    "/base/": [
+      {
+        "text": "基础配置",
+        "children": [
+          "/base/README.md",
+          "/base/base.md",
+          "/base/config.md",
+          "/base/development.md",
+          "/base/css.md",
+          "/base/image.md",
+          "/base/output.md",
+          "/base/clean.md",
+          "/base/font.md",
+          "/base/other.md",
+          "/base/javascript.md",
+          "/base/html.md",
+          "/base/server.md",
+          "/base/production.md",
+          "/base/optimizeCss.md",
+          "/base/minifyHtml.md",
+          "/base/summary.md"
+        ]
+      }
+    ],
+    "/senior/": [
+      {
+        "text": "高级优化",
+        "children": [
+          "/senior/README.md",
+          "/senior/enhanceExperience.md",
+          "/senior/liftingSpeed.md",
+          "/senior/reduceVolume.md",
+          "/senior/optimizePerformance.md",
+          "/senior/summary.md"
+        ]
+      }
+    ],
+    "/project/": [
+      {
+        "text": "项目配置",
+        "children": [
+          "/project/README.md",
+          "/project/react-cli.md",
+          "/project/vue-cli.md",
+          "/project/summary.md"
+        ]
+      }
+    ],
+    "/origin/": [
+      {
+        "text": "原理分析",
+        "children": [
+          "/origin/README.md",
+          "/origin/loader.md",
+          "/origin/plugin.md",
+          "/origin/summary.md"
+        ]
+      }
+    ]
+  },
+  "locales": {
+    "/": {
+      "selectLanguageName": "English"
+    }
+  },
+  "darkMode": true,
+  "repo": null,
+  "selectLanguageText": "Languages",
+  "selectLanguageAriaLabel": "Select language",
+  "sidebarDepth": 2,
+  "editLink": true,
+  "editLinkText": "Edit this page",
+  "lastUpdatedText": "Last Updated",
+  "contributors": true,
+  "contributorsText": "Contributors",
+  "notFound": [
+    "There's nothing here.",
+    "How did we get here?",
+    "That's a Four-Oh-Four.",
+    "Looks like we've got some broken links."
+  ],
+  "backToHome": "Take me home",
+  "openInNewWindow": "open in new window",
+  "toggleDarkMode": "toggle dark mode",
+  "toggleSidebar": "toggle sidebar"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updateThemeData) {
+    __VUE_HMR_RUNTIME__.updateThemeData(themeData)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ themeData }) => {
+    __VUE_HMR_RUNTIME__.updateThemeData(themeData)
+  })
+}

docs/.vuepress/.temp/pages/404.html.js

@@ -0,0 +1,26 @@
+export const data = {
+  "key": "v-3706649a",
+  "path": "/404.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {
+    "layout": "404"
+  },
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": null
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/404.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/0.html.js

@@ -0,0 +1,74 @@
+export const data = {
+  "key": "v-638f430e",
+  "path": "/base/0.html",
+  "title": "基本使用",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "功能介绍",
+      "slug": "功能介绍",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "开始使用",
+      "slug": "开始使用",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 资源目录",
+          "slug": "_1-资源目录",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 创建文件",
+          "slug": "_2-创建文件",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 下载依赖",
+          "slug": "_3-下载依赖",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 启用 Webpack",
+          "slug": "_4-启用-webpack",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 观察输出文件",
+          "slug": "_5-观察输出文件",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "小结",
+      "slug": "小结",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/0.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/0.html.vue

@@ -0,0 +1,70 @@
+<template><h1 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用" aria-hidden="true">#</a> 基本使用</h1>
+<p><strong><code>Webpack</code> 是一个静态资源打包工具。</strong></p>
+<p>它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。</p>
+<p>输出的文件就是编译好的文件，就可以在浏览器段运行了。</p>
+<p>我们将 <code>Webpack</code> 输出的文件叫做 <code>bundle</code>。</p>
+<h2 id="功能介绍" tabindex="-1"><a class="header-anchor" href="#功能介绍" aria-hidden="true">#</a> 功能介绍</h2>
+<p>Webpack 本身功能是有限的:</p>
+<ul>
+<li>开发模式：仅能编译 JS 中的 <code>ES Module</code> 语法</li>
+<li>生产模式：能编译 JS 中的 <code>ES Module</code> 语法，还能压缩 JS 代码</li>
+</ul>
+<h2 id="开始使用" tabindex="-1"><a class="header-anchor" href="#开始使用" aria-hidden="true">#</a> 开始使用</h2>
+<h3 id="_1-资源目录" tabindex="-1"><a class="header-anchor" href="#_1-资源目录" aria-hidden="true">#</a> 1. 资源目录</h3>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>├── webpack_code # 项目根目录（所有指令必须在这个目录运行）
+│   ├── src # 项目源码目录
+│   │    ├── js # js文件目录
+│   │    │    ├── count.js
+│   │    │    └── sum.js
+│   │    └── main.js # 项目主文件
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-创建文件" tabindex="-1"><a class="header-anchor" href="#_2-创建文件" aria-hidden="true">#</a> 2. 创建文件</h3>
+<ul>
+<li>count.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> x <span class="token operator">-</span> y<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
+<li>sum.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token operator">=></span> p <span class="token operator">+</span> c<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
+<li>main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-下载依赖" tabindex="-1"><a class="header-anchor" href="#_3-下载依赖" aria-hidden="true">#</a> 3. 下载依赖</h3>
+<p>打开终端，来到项目根目录。运行以下指令：</p>
+<ul>
+<li>初始化<code>package.json</code></li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm init -y
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>此时会生成一个基础的 <code>package.json</code> 文件。</p>
+<p><strong>需要注意的是 <code>package.json</code> 中 <code>name</code> 字段不能叫做 <code>webpack</code>, 否则下一步会报错</strong></p>
+<ul>
+<li>下载依赖</li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm i webpack webpack-cli -D
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="_4-启用-webpack" tabindex="-1"><a class="header-anchor" href="#_4-启用-webpack" aria-hidden="true">#</a> 4. 启用 Webpack</h3>
+<ul>
+<li>开发模式</li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=development
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul>
+<li>生产模式</li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=production
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>npx webpack</code>: 是用来运行本地安装 <code>Webpack</code> 包的。</p>
+<p><code>./src/main.js</code>: 指定 <code>Webpack</code> 从 <code>main.js</code> 文件开始打包，不但会打包 <code>main.js</code>，还会将其依赖也一起打包进来。</p>
+<p><code>--mode=xxx</code>：指定模式（环境）。</p>
+<h3 id="_5-观察输出文件" tabindex="-1"><a class="header-anchor" href="#_5-观察输出文件" aria-hidden="true">#</a> 5. 观察输出文件</h3>
+<p>默认 <code>Webpack</code> 会将文件打包输出到 <code>dist</code> 目录下，我们查看 <code>dist</code> 目录下文件情况就好了</p>
+<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
+<p><code>Webpack</code> 本身功能比较少，只能处理 <code>js</code> 资源，一旦遇到 <code>css</code> 等其他资源就会报错。</p>
+<p>所以我们学习 <code>Webpack</code>，就是主要学习如何处理其他资源。</p>
+</template>

docs/.vuepress/.temp/pages/base/1.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-65441bad",
+  "path": "/base/1.html",
+  "title": "基本配置",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "5 大核心概念",
+      "slug": "_5-大核心概念",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "准备 Webpack 配置文件",
+      "slug": "准备-webpack-配置文件",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "修改配置文件",
+      "slug": "修改配置文件",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "小结",
+      "slug": "小结",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/1.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/1.html.vue

@@ -0,0 +1,82 @@
+<template><h1 id="基本配置" tabindex="-1"><a class="header-anchor" href="#基本配置" aria-hidden="true">#</a> 基本配置</h1>
+<p>在开始使用 <code>Webpack</code> 之前，我们需要对 <code>Webpack</code> 的配置有一定的认识。</p>
+<h2 id="_5-大核心概念" tabindex="-1"><a class="header-anchor" href="#_5-大核心概念" aria-hidden="true">#</a> 5 大核心概念</h2>
+<ol>
+<li>entry（入口）</li>
+</ol>
+<p>指示 Webpack 从哪个文件开始打包</p>
+<ol start="2">
+<li>output（输出）</li>
+</ol>
+<p>指示 Webpack 打包完的文件输出到哪里去，如何命名等</p>
+<ol start="3">
+<li>loader（加载器）</li>
+</ol>
+<p>webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析</p>
+<ol start="4">
+<li>plugins（插件）</li>
+</ol>
+<p>扩展 Webpack 的功能</p>
+<ol start="5">
+<li>mode（模式）</li>
+</ol>
+<p>主要由两种模式：</p>
+<ul>
+<li>开发模式：development</li>
+<li>生产模式：production</li>
+</ul>
+<h2 id="准备-webpack-配置文件" tabindex="-1"><a class="header-anchor" href="#准备-webpack-配置文件" aria-hidden="true">#</a> 准备 Webpack 配置文件</h2>
+<p>在项目根目录下新建文件：<code>webpack.config.js</code></p>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 入口</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
+  <span class="token comment">// 输出</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 加载器</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 插件</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// 模式</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范</p>
+<h2 id="修改配置文件" tabindex="-1"><a class="header-anchor" href="#修改配置文件" aria-hidden="true">#</a> 修改配置文件</h2>
+<ol>
+<li>配置文件</li>
+</ol>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// Node.js的核心模块，专门用来处理文件路径</span>
+<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 入口</span>
+  <span class="token comment">// 相对路径和绝对路径都行</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token comment">// 输出</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// path: 文件输出目录，必须是绝对路径</span>
+    <span class="token comment">// path.resolve()方法返回一个绝对路径</span>
+    <span class="token comment">// __dirname 当前文件的文件夹绝对路径</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// filename: 输出文件名</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 加载器</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 插件</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// 模式</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span> <span class="token comment">// 开发模式</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><ol start="2">
+<li>运行指令</li>
+</ol>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>此时功能和之前一样，也不能处理样式资源</p>
+<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
+<p>Webpack 将来都通过 <code>webpack.config.js</code> 文件进行配置，来增强 Webpack 的功能</p>
+<p>我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式</p>
+</template>

docs/.vuepress/.temp/pages/base/10.html.js

@@ -0,0 +1,37 @@
+export const data = {
+  "key": "v-43725e55",
+  "path": "/base/10.html",
+  "title": "自动清空上次打包资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 配置",
+      "slug": "_1-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 运行指令",
+      "slug": "_2-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/10.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/10.html.vue

@@ -0,0 +1,57 @@
+<template><h1 id="自动清空上次打包资源" tabindex="-1"><a class="header-anchor" href="#自动清空上次打包资源" aria-hidden="true">#</a> 自动清空上次打包资源</h1>
+<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
+          <span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
+          <span class="token comment">// [hash:8]: hash值取8位</span>
+          <span class="token comment">// [ext]: 使用之前的文件扩展名</span>
+          <span class="token comment">// [query]: 添加之前的query参数</span>
+          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>观察 dist 目录资源情况</p>
+</template>

docs/.vuepress/.temp/pages/base/11.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-452736f4",
+  "path": "/base/11.html",
+  "title": "处理字体图标资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载字体图标文件",
+      "slug": "_1-下载字体图标文件",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 添加字体图标资源",
+      "slug": "_2-添加字体图标资源",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 配置",
+      "slug": "_3-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 运行指令",
+      "slug": "_4-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/11.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/11.html.vue

@@ -0,0 +1,84 @@
+<template><h1 id="处理字体图标资源" tabindex="-1"><a class="header-anchor" href="#处理字体图标资源" aria-hidden="true">#</a> 处理字体图标资源</h1>
+<h2 id="_1-下载字体图标文件" tabindex="-1"><a class="header-anchor" href="#_1-下载字体图标文件" aria-hidden="true">#</a> 1. 下载字体图标文件</h2>
+<ol>
+<li>
+<p>打开<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">阿里巴巴矢量图标库<ExternalLinkIcon/></a></p>
+</li>
+<li>
+<p>选择想要的图标添加到购物车，统一下载到本地</p>
+</li>
+</ol>
+<h2 id="_2-添加字体图标资源" tabindex="-1"><a class="header-anchor" href="#_2-添加字体图标资源" aria-hidden="true">#</a> 2. 添加字体图标资源</h2>
+<ul>
+<li>
+<p>src/fonts/iconfont.ttf</p>
+</li>
+<li>
+<p>src/fonts/iconfont.woff</p>
+</li>
+<li>
+<p>src/fonts/iconfont.woff2</p>
+</li>
+<li>
+<p>src/css/iconfont.css</p>
+<ul>
+<li>注意字体文件路径需要修改</li>
+</ul>
+</li>
+<li>
+<p>src/main.js</p>
+</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入字体图标资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 使用字体图标 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p><code>type: &quot;asset/resource&quot;</code>和<code>type: &quot;asset&quot;</code>的区别：</p>
+<ol>
+<li><code>type: &quot;asset/resource&quot;</code> 相当于<code>file-loader</code>, 将文件转化成 Webpack 能识别的资源，其他不做处理</li>
+<li><code>type: &quot;asset&quot;</code> 相当于<code>url-loader</code>, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式</li>
+</ol>
+<h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/12.html.js

@@ -0,0 +1,37 @@
+export const data = {
+  "key": "v-46dc0f93",
+  "path": "/base/12.html",
+  "title": "处理其他资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 配置",
+      "slug": "_1-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 运行指令",
+      "slug": "_2-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/12.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/12.html.vue

@@ -0,0 +1,15 @@
+<template><h1 id="处理其他资源" tabindex="-1"><a class="header-anchor" href="#处理其他资源" aria-hidden="true">#</a> 处理其他资源</h1>
+<p>开发中可能还存在一些其他资源，如音视频等，我们也一起处理了</p>
+<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token punctuation">{</span>
+  <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?|map4|map3|avi)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+  <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>就是在处理字体图标资源基础上增加其他文件类型，统一处理即可</p>
+<h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/13.html.js

@@ -0,0 +1,81 @@
+export const data = {
+  "key": "v-4890e832",
+  "path": "/base/13.html",
+  "title": "处理 js 资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "Eslint",
+      "slug": "eslint",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 配置文件",
+          "slug": "_1-配置文件",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 具体配置",
+          "slug": "_2-具体配置",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 在 Webpack 中使用",
+          "slug": "_3-在-webpack-中使用",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. VSCode Eslint 插件",
+          "slug": "_4-vscode-eslint-插件",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "Babel",
+      "slug": "babel",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 配置文件",
+          "slug": "_1-配置文件-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 具体配置",
+          "slug": "_2-具体配置-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 在 Webpack 中使用",
+          "slug": "_3-在-webpack-中使用-1",
+          "children": []
+        }
+      ]
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/13.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/13.html.vue

@@ -0,0 +1,275 @@
+<template><h1 id="处理-js-资源" tabindex="-1"><a class="header-anchor" href="#处理-js-资源" aria-hidden="true">#</a> 处理 js 资源</h1>
+<p>有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？</p>
+<p>原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。</p>
+<p>其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。</p>
+<ul>
+<li>针对 js 兼容性处理，我们使用 Babel 来完成</li>
+<li>针对代码格式，我们使用 Eslint 来完成</li>
+</ul>
+<p>我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理</p>
+<h2 id="eslint" tabindex="-1"><a class="header-anchor" href="#eslint" aria-hidden="true">#</a> Eslint</h2>
+<p>可组装的 JavaScript 和 JSX 检查工具。</p>
+<p>这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能</p>
+<p>我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查</p>
+<h3 id="_1-配置文件" tabindex="-1"><a class="header-anchor" href="#_1-配置文件" aria-hidden="true">#</a> 1. 配置文件</h3>
+<p>配置文件由很多种写法：</p>
+<ul>
+<li><code>.eslintrc.*</code>：新建文件，位于项目根目录
+<ul>
+<li><code>.eslintrc</code></li>
+<li><code>.eslintrc.js</code></li>
+<li><code>.eslintrc.json</code></li>
+<li>区别在于配置格式不一样</li>
+</ul>
+</li>
+<li><code>package.json</code> 中 <code>eslintConfig</code>：不需要创建文件，在原有文件基础上写</li>
+</ul>
+<p>ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p>
+<h3 id="_2-具体配置" tabindex="-1"><a class="header-anchor" href="#_2-具体配置" aria-hidden="true">#</a> 2. 具体配置</h3>
+<p>我们以 <code>.eslintrc.js</code> 配置文件为例：</p>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 解析选项</span>
+  <span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 具体检查规则</span>
+  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 继承其他规则</span>
+  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// ...</span>
+  <span class="token comment">// 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol>
+<li>parserOptions 解析选项</li>
+</ol>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> <span class="token comment">// ES 语法版本</span>
+  <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span> <span class="token comment">// ES 模块化</span>
+  <span class="token literal-property property">ecmaFeatures</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// ES 其他特性</span>
+    <span class="token literal-property property">jsx</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 如果是 React 项目，就需要开启 jsx 语法</span>
+  <span class="token punctuation">}</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="2">
+<li>rules 具体规则</li>
+</ol>
+<ul>
+<li><code>&quot;off&quot;</code> 或 <code>0</code> - 关闭规则</li>
+<li><code>&quot;warn&quot;</code> 或 <code>1</code> - 开启规则，使用警告级别的错误：<code>warn</code> (不会导致程序退出)</li>
+<li><code>&quot;error&quot;</code> 或 <code>2</code> - 开启规则，使用错误级别的错误：<code>error</code> (当被触发的时候，程序会退出)</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">semi</span><span class="token operator">:</span> <span class="token string">"error"</span><span class="token punctuation">,</span> <span class="token comment">// 禁止使用分号</span>
+  <span class="token string-property property">'array-callback-return'</span><span class="token operator">:</span> <span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 强制数组方法的回调函数中有 return 语句，否则警告</span>
+  <span class="token string-property property">'default-case'</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 要求 switch 语句中有 default 分支，否则警告</span>
+    <span class="token punctuation">{</span> <span class="token literal-property property">commentPattern</span><span class="token operator">:</span> <span class="token string">'^no default$'</span> <span class="token punctuation">}</span> <span class="token comment">// 允许在最后注释 no default, 就不会有警告了</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token string">'warn'</span><span class="token punctuation">,</span> <span class="token comment">// 强制使用 === 和 !==，否则警告</span>
+    <span class="token string">'smart'</span> <span class="token comment">// https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p>更多规则详见：<a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">规则文档<ExternalLinkIcon/></a></p>
+<ol start="3">
+<li>extends 继承</li>
+</ol>
+<p>开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。</p>
+<p>现有以下较为有名的规则：</p>
+<ul>
+<li><a href="https://eslint.bootcss.com/docs/rules/" target="_blank" rel="noopener noreferrer">Eslint 官方的规则<ExternalLinkIcon/></a>：<code>eslint:recommended</code></li>
+<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-eslint" target="_blank" rel="noopener noreferrer">Vue Cli 官方的规则<ExternalLinkIcon/></a>：<code>plugin:vue/essential</code></li>
+<li><a href="https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app" target="_blank" rel="noopener noreferrer">React Cli 官方的规则<ExternalLinkIcon/></a>：<code>react-app</code></li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// 例如在React项目中，我们可以这样写配置</span>
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"react-app"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// 我们的规则会覆盖掉react-app的规则</span>
+    <span class="token comment">// 所以想要修改规则直接改就是了</span>
+    <span class="token literal-property property">eqeqeq</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"warn"</span><span class="token punctuation">,</span> <span class="token string">"smart"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="_3-在-webpack-中使用" tabindex="-1"><a class="header-anchor" href="#_3-在-webpack-中使用" aria-hidden="true">#</a> 3. 在 Webpack 中使用</h3>
+<ol>
+<li>下载包</li>
+</ol>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i eslint-webpack-plugin eslint -D
+</code></pre></div><ol start="2">
+<li>定义 Eslint 配置文件</li>
+</ol>
+<ul>
+<li>.eslintrc.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 继承 Eslint 规则</span>
+  <span class="token keyword">extends</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"eslint:recommended"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// 启用node中全局变量</span>
+  <span class="token literal-property property">env</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">node</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">parserOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">ecmaVersion</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">sourceType</span><span class="token operator">:</span> <span class="token string">"module"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token string-property property">"no-var"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 不能使用 var 定义变量</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="3">
+<li>修改 js 文件代码</li>
+</ol>
+<ul>
+<li>main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
+
+<span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="4">
+<li>配置</li>
+</ol>
+<ul>
+<li>webpack.config.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> ESLintPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token comment">// 省略</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token comment">// 指定检查文件的根目录</span>
+      <span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><ol start="5">
+<li>运行指令</li>
+</ol>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>在控制台查看 Eslint 检查效果</p>
+<h3 id="_4-vscode-eslint-插件" tabindex="-1"><a class="header-anchor" href="#_4-vscode-eslint-插件" aria-hidden="true">#</a> 4. VSCode Eslint 插件</h3>
+<p>打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决</p>
+<h2 id="babel" tabindex="-1"><a class="header-anchor" href="#babel" aria-hidden="true">#</a> Babel</h2>
+<p>JavaScript 编译器。</p>
+<p>主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中</p>
+<h3 id="_1-配置文件-1" tabindex="-1"><a class="header-anchor" href="#_1-配置文件-1" aria-hidden="true">#</a> 1. 配置文件</h3>
+<p>配置文件由很多种写法：</p>
+<ul>
+<li><code>babel.config.*</code>：新建文件，位于项目根目录
+<ul>
+<li><code>babel.config.js</code></li>
+<li><code>babel.config.json</code></li>
+</ul>
+</li>
+<li><code>.babelrc.*</code>：新建文件，位于项目根目录
+<ul>
+<li><code>.babelrc</code></li>
+<li><code>.babelrc.js</code></li>
+<li><code>.babelrc.json</code></li>
+</ul>
+</li>
+<li><code>package.json</code> 中 <code>babel</code>：不需要创建文件，在原有文件基础上写</li>
+</ul>
+<p>Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可</p>
+<h3 id="_2-具体配置-1" tabindex="-1"><a class="header-anchor" href="#_2-具体配置-1" aria-hidden="true">#</a> 2. 具体配置</h3>
+<p>我们以 <code>babel.config.js</code> 配置文件为例：</p>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 预设</span>
+  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol>
+<li>presets 预设</li>
+</ol>
+<p>简单理解：就是一组 Babel 插件, 扩展 Babel 功能</p>
+<ul>
+<li><code>@babel/preset-env</code>: 一个智能预设，允许您使用最新的 JavaScript。</li>
+<li><code>@babel/preset-react</code>：一个用来编译 React jsx 语法的预设</li>
+<li><code>@babel/preset-typescript</code>：一个用来编译 TypeScript 语法的预设</li>
+</ul>
+<h3 id="_3-在-webpack-中使用-1" tabindex="-1"><a class="header-anchor" href="#_3-在-webpack-中使用-1" aria-hidden="true">#</a> 3. 在 Webpack 中使用</h3>
+<ol>
+<li>下载包</li>
+</ol>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i babel-loader @babel/core @babel/preset-env -D
+</code></pre></div><ol start="2">
+<li>定义 Babel 配置文件</li>
+</ol>
+<ul>
+<li>babel.config.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">presets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3">
+<li>修改 js 文件代码</li>
+</ol>
+<ul>
+<li>main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="4">
+<li>配置</li>
+</ol>
+<ul>
+<li>webpack.config.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> ESLintPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token comment">// 省略</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
+        <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token comment">// 指定检查文件的根目录</span>
+      <span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><ol start="5">
+<li>运行指令</li>
+</ol>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开打包后的 <code>dist/static/js/main.js</code> 文件查看，会发现箭头函数等 ES6 语法已经转换了</p>
+</template>

docs/.vuepress/.temp/pages/base/14.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-4a45c0d1",
+  "path": "/base/14.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/14.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/14.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/15.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-4bfa9970",
+  "path": "/base/15.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/15.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/15.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/16.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-4daf720f",
+  "path": "/base/16.html",
+  "title": "处理 Html 资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 配置",
+      "slug": "_2-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 修改 index.html",
+      "slug": "_3-修改-index-html",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 运行指令",
+      "slug": "_4-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/16.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/16.html.vue

@@ -0,0 +1,62 @@
+<template><h1 id="处理-html-资源" tabindex="-1"><a class="header-anchor" href="#处理-html-资源" aria-hidden="true">#</a> 处理 Html 资源</h1>
+<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i html-webpack-plugin -D
+</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
+<ul>
+<li>webpack.config.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+			<span class="token comment">// 省略</span>
+		<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+		<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+			<span class="token comment">// 指定检查文件的根目录</span>
+			<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+			<span class="token comment">// 以 public/index.html 为模板创建文件</span>
+			<span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
+			<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+	<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h2 id="_3-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_3-修改-index-html" aria-hidden="true">#</a> 3. 修改 index.html</h2>
+<p>去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入</p>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>此时 dist 目录就会输出一个 index.html 文件</p>
+</template>

docs/.vuepress/.temp/pages/base/17.html.js

@@ -0,0 +1,43 @@
+export const data = {
+  "key": "v-4f644aae",
+  "path": "/base/17.html",
+  "title": "开发服务器&自动化",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 配置",
+      "slug": "_2-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 运行指令",
+      "slug": "_3-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/17.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/17.html.vue

@@ -0,0 +1,22 @@
+<template><h1 id="开发服务器-自动化" tabindex="-1"><a class="header-anchor" href="#开发服务器-自动化" aria-hidden="true">#</a> 开发服务器&amp;自动化</h1>
+<p>每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化</p>
+<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i webpack-dev-server -D
+</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
+<ul>
+<li>webpack.config.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token comment">// 其他省略</span>
+	<span class="token literal-property property">devServer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">host</span><span class="token operator">:</span> <span class="token string">"localhost"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器域名</span>
+		<span class="token literal-property property">port</span><span class="token operator">:</span> <span class="token string">"3000"</span><span class="token punctuation">,</span> <span class="token comment">// 启动服务器端口号</span>
+		<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否自动打开浏览器</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack serve
+</code></pre></div><p><strong>注意运行指令发生了变化</strong></p>
+<p>并且当你使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。</p>
+<p>开发时我们只关心代码能运行，有效果即可，至于代码被编译成什么样子，我们并不需要知道。</p>
+</template>

docs/.vuepress/.temp/pages/base/18.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-5119234d",
+  "path": "/base/18.html",
+  "title": "总结",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/18.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/18.html.vue

@@ -0,0 +1,3 @@
+<template><h1 id="总结" tabindex="-1"><a class="header-anchor" href="#总结" aria-hidden="true">#</a> 总结</h1>
+<p>我们现已完成开发环境的配置</p>
+</template>

docs/.vuepress/.temp/pages/base/19.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-52cdfbec",
+  "path": "/base/19.html",
+  "title": "准备",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/19.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/19.html.vue

@@ -0,0 +1,3 @@
+<template><h1 id="准备" tabindex="-1"><a class="header-anchor" href="#准备" aria-hidden="true">#</a> 准备</h1>
+<p>现有两个环境，</p>
+</template>

docs/.vuepress/.temp/pages/base/2.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-66f8f44c",
+  "path": "/base/2.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/2.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/2.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/20.html.js

@@ -0,0 +1,43 @@
+export const data = {
+  "key": "v-78589996",
+  "path": "/base/20.html",
+  "title": "提取 Css 成单独文件",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 配置",
+      "slug": "_2-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 运行指令",
+      "slug": "_3-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/20.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/20.html.vue

@@ -0,0 +1,86 @@
+<template><h1 id="提取-css-成单独文件" tabindex="-1"><a class="header-anchor" href="#提取-css-成单独文件" aria-hidden="true">#</a> 提取 Css 成单独文件</h1>
+<p>Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式</p>
+<p>这样对于网站来说，会出现闪屏现象，用户体验不好</p>
+<p>我们应该是单独的 Css 文件，通过 link 标签加载性能才好</p>
+<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i mini-css-extract-plugin -D
+</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
+<ul>
+<li>webpack.prod.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"mini-css-extract-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token comment">// 将 style-loader 替换成 MiniCssExtractPlugin.loader</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span>MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+				<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+					<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+						<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span>
+					<span class="token punctuation">}</span><span class="token punctuation">,</span>
+				<span class="token punctuation">}</span><span class="token punctuation">,</span>
+				<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+					<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+				<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
+				<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+					<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+				<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+		<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+		<span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+			<span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token comment">// 会自动引入打包生成的css</span>
+		<span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+			<span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"../public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token comment">// 提取css成单独文件</span>
+		<span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+			<span class="token comment">// 定义输出文件名和目录</span>
+			<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/css/main.css"</span><span class="token punctuation">,</span>
+		<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+	<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"production"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm run build
+</code></pre></div></template>

docs/.vuepress/.temp/pages/base/21.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-7a0d7235",
+  "path": "/base/21.html",
+  "title": "Css 兼容性处理",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 配置",
+      "slug": "_2-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 合并配置",
+      "slug": "_3-合并配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 运行指令",
+      "slug": "_4-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/21.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/22.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-7bc24ad4",
+  "path": "/base/22.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/22.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/22.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/23.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-7d772373",
+  "path": "/base/23.html",
+  "title": "html 压缩",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/23.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/23.html.vue

@@ -0,0 +1,4 @@
+<template><h1 id="html-压缩" tabindex="-1"><a class="header-anchor" href="#html-压缩" aria-hidden="true">#</a> html 压缩</h1>
+<p>默认生产模式已经开启了：html 压缩和 js 压缩</p>
+<p>不需要额外进行配置</p>
+</template>

docs/.vuepress/.temp/pages/base/3.html.js

@@ -0,0 +1,179 @@
+export const data = {
+  "key": "v-68adcceb",
+  "path": "/base/3.html",
+  "title": "处理样式资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "介绍",
+      "slug": "介绍",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "处理 Css 资源",
+      "slug": "处理-css-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Css 资源",
+          "slug": "_4-添加-css-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "处理 Less 资源",
+      "slug": "处理-less-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Less 资源",
+          "slug": "_4-添加-less-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令-1",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "处理 Sass 和 Scss 资源",
+      "slug": "处理-sass-和-scss-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包-2",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍-2",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置-2",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Sass 资源",
+          "slug": "_4-添加-sass-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令-2",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "处理 Styl 资源",
+      "slug": "处理-styl-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包-3",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍-3",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置-3",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Styl 资源",
+          "slug": "_4-添加-styl-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令-3",
+          "children": []
+        }
+      ]
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/3.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/3.html.vue

@@ -0,0 +1,323 @@
+<template><h1 id="处理样式资源" tabindex="-1"><a class="header-anchor" href="#处理样式资源" aria-hidden="true">#</a> 处理样式资源</h1>
+<p>本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源</p>
+<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2>
+<p>Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源</p>
+<p>我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用</p>
+<p>官方文档找不到的话，可以从社区 Github 中搜索查询</p>
+<p><a href="https://webpack.docschina.org/loaders/" target="_blank" rel="noopener noreferrer">Webpack 官方 Loader 文档<ExternalLinkIcon/></a></p>
+<h2 id="处理-css-资源" tabindex="-1"><a class="header-anchor" href="#处理-css-资源" aria-hidden="true">#</a> 处理 Css 资源</h2>
+<h3 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i css-loader style-loader -D
+</code></pre></div><p>注意：需要下载两个 loader</p>
+<h3 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>css-loader</code>：负责将 Css 文件编译成 Webpack 能识别的模块</li>
+<li><code>style-loader</code>：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容</li>
+</ul>
+<p>此时样式就会以 Style 标签的形式在页面上生效</p>
+<h3 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="_4-添加-css-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-css-资源" aria-hidden="true">#</a> 4. 添加 Css 资源</h3>
+<ul>
+<li>src/css/index.css</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 准备一个使用样式的 DOM 容器 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="处理-less-资源" tabindex="-1"><a class="header-anchor" href="#处理-less-资源" aria-hidden="true">#</a> 处理 Less 资源</h2>
+<h3 id="_1-下载包-1" tabindex="-1"><a class="header-anchor" href="#_1-下载包-1" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i less-loader -D
+</code></pre></div><h3 id="_2-功能介绍-1" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-1" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>less-loader</code>：负责将 Less 文件编译成 Css 文件</li>
+</ul>
+<h3 id="_3-配置-1" tabindex="-1"><a class="header-anchor" href="#_3-配置-1" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="_4-添加-less-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-less-资源" aria-hidden="true">#</a> 4. 添加 Less 资源</h3>
+<ul>
+<li>src/less/index.less</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_5-运行指令-1" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-1" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="处理-sass-和-scss-资源" tabindex="-1"><a class="header-anchor" href="#处理-sass-和-scss-资源" aria-hidden="true">#</a> 处理 Sass 和 Scss 资源</h2>
+<h3 id="_1-下载包-2" tabindex="-1"><a class="header-anchor" href="#_1-下载包-2" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i sass-loader sass -D
+</code></pre></div><p>注意：需要下载两个</p>
+<h3 id="_2-功能介绍-2" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-2" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>sass-loader</code>：负责将 Sass 文件编译成 css 文件</li>
+<li><code>sass</code>：<code>sass-loader</code> 依赖 <code>sass</code> 进行编译</li>
+</ul>
+<h3 id="_3-配置-2" tabindex="-1"><a class="header-anchor" href="#_3-配置-2" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="_4-添加-sass-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-sass-资源" aria-hidden="true">#</a> 4. 添加 Sass 资源</h3>
+<ul>
+<li>src/sass/index.sass</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号和分号 */</span>
+.box3
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px
+  <span class="token property">background-color</span><span class="token punctuation">:</span> hotpink
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/sass/index.scss</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box4</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> lightpink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="_5-运行指令-2" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-2" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="处理-styl-资源" tabindex="-1"><a class="header-anchor" href="#处理-styl-资源" aria-hidden="true">#</a> 处理 Styl 资源</h2>
+<h3 id="_1-下载包-3" tabindex="-1"><a class="header-anchor" href="#_1-下载包-3" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i stylus-loader -D
+</code></pre></div><h3 id="_2-功能介绍-3" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-3" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>stylus-loader</code>：负责将 Styl 文件编译成 Css 文件</li>
+</ul>
+<h3 id="_3-配置-3" tabindex="-1"><a class="header-anchor" href="#_3-配置-3" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="_4-添加-styl-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-styl-资源" aria-hidden="true">#</a> 4. 添加 Styl 资源</h3>
+<ul>
+<li>src/styl/index.styl</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号、分号、冒号 */</span>
+.box width 100px height 100px background-color pink<span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 准备一个使用样式的 DOM 容器 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_5-运行指令-3" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-3" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/4.html.js

@@ -0,0 +1,55 @@
+export const data = {
+  "key": "v-6a62a58a",
+  "path": "/base/4.html",
+  "title": "处理 Css 资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 功能介绍",
+      "slug": "_2-功能介绍",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 配置",
+      "slug": "_3-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 添加 Css 资源",
+      "slug": "_4-添加-css-资源",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "5. 运行指令",
+      "slug": "_5-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/4.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/4.html.vue

@@ -0,0 +1,71 @@
+<template><h1 id="处理-css-资源" tabindex="-1"><a class="header-anchor" href="#处理-css-资源" aria-hidden="true">#</a> 处理 Css 资源</h1>
+<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i css-loader style-loader -D
+</code></pre></div><p>注意：需要下载两个 loader</p>
+<h2 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h2>
+<ul>
+<li><code>css-loader</code>：负责将 Css 文件编译成 Webpack 能识别的模块</li>
+<li><code>style-loader</code>：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容</li>
+</ul>
+<p>此时样式就会以 Style 标签的形式在页面上生效</p>
+<h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+			<span class="token punctuation">{</span>
+				<span class="token comment">// 用来匹配 .css 结尾的文件</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+		<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h2 id="_4-添加-css-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-css-资源" aria-hidden="true">#</a> 4. 添加 Css 资源</h2>
+<ul>
+<li>src/css/index.css</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
+	<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+	<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+	<span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+		<span class="token comment">&lt;!-- 准备一个使用样式的 DOM 容器 --></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/5.html.js

@@ -0,0 +1,55 @@
+export const data = {
+  "key": "v-6c177e29",
+  "path": "/base/5.html",
+  "title": "处理 Less 资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 功能介绍",
+      "slug": "_2-功能介绍",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 配置",
+      "slug": "_3-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 添加 Less 资源",
+      "slug": "_4-添加-less-资源",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "5. 运行指令",
+      "slug": "_5-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/5.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/5.html.vue

@@ -0,0 +1,72 @@
+<template><h1 id="处理-less-资源" tabindex="-1"><a class="header-anchor" href="#处理-less-资源" aria-hidden="true">#</a> 处理 Less 资源</h1>
+<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i less-loader -D
+</code></pre></div><h2 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h2>
+<ul>
+<li><code>less-loader</code>：负责将 Less 文件编译成 Css 文件</li>
+</ul>
+<h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+			<span class="token punctuation">{</span>
+				<span class="token comment">// 用来匹配 .css 结尾的文件</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+		<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="_4-添加-less-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-less-资源" aria-hidden="true">#</a> 4. 添加 Less 资源</h2>
+<ul>
+<li>src/less/index.less</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
+	<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+	<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+	<span class="token property">background-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"世纪难题：1 + 1 = "</span><span class="token punctuation">,</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h2 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/6.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-6dcc56c8",
+  "path": "/base/6.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/6.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/6.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/7.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-6f812f67",
+  "path": "/base/7.html",
+  "title": "",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/7.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/7.html.vue

@@ -0,0 +1 @@
+<template></template>

docs/.vuepress/.temp/pages/base/8.html.js

@@ -0,0 +1,61 @@
+export const data = {
+  "key": "v-71360806",
+  "path": "/base/8.html",
+  "title": "处理图片资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 配置",
+      "slug": "_1-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 添加图片资源",
+      "slug": "_2-添加图片资源",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 使用图片资源",
+      "slug": "_3-使用图片资源",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 运行指令",
+      "slug": "_4-运行指令",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "5. 输出资源情况",
+      "slug": "_5-输出资源情况",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "6. 对图片资源进行优化",
+      "slug": "_6-对图片资源进行优化",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/8.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/8.html.vue

@@ -0,0 +1,84 @@
+<template><h1 id="处理图片资源" tabindex="-1"><a class="header-anchor" href="#处理图片资源" aria-hidden="true">#</a> 处理图片资源</h1>
+<p>过去在 Webpack4 时，我们处理图片资源通过 <code>file-loader</code> 和 <code>url-loader</code> 进行处理</p>
+<p>现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源</p>
+<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+			<span class="token comment">// 省略之前的 Loader</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+		<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_2-添加图片资源" tabindex="-1"><a class="header-anchor" href="#_2-添加图片资源" aria-hidden="true">#</a> 2. 添加图片资源</h2>
+<ul>
+<li>src/imgs/1.png</li>
+<li>src/imgs/2.gif</li>
+<li>src/imgs/3.jpeg</li>
+</ul>
+<h2 id="_3-使用图片资源" tabindex="-1"><a class="header-anchor" href="#_3-使用图片资源" aria-hidden="true">#</a> 3. 使用图片资源</h2>
+<ul>
+<li>src/less/index.less</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
+	<span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+	<span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+	<span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../imgs/2.gif"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
+	<span class="token property">background-size</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ul>
+<li>src/sass/index.sass</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>.box3
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px
+  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../imgs/1.png"</span><span class="token punctuation">)</span></span>
+  <span class="token property">background-size</span><span class="token punctuation">:</span> cover
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/styl/index.styl</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code>.box5
+	width 100px
+	height 100px
+	background-image <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"../imgs/3.jpeg"</span><span class="token punctuation">)</span></span>
+	background-size cover
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="_5-输出资源情况" tabindex="-1"><a class="header-anchor" href="#_5-输出资源情况" aria-hidden="true">#</a> 5. 输出资源情况</h2>
+<p>此时如果查看 dist 目录的话，会发现多了三张图片资源</p>
+<p>因为 Webpack 会将所有打包好的资源输出到 dist 目录下</p>
+<ul>
+<li>为什么样式资源没有呢？</li>
+</ul>
+<p>因为经过 <code>style-loader</code> 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来</p>
+<h2 id="_6-对图片资源进行优化" tabindex="-1"><a class="header-anchor" href="#_6-对图片资源进行优化" aria-hidden="true">#</a> 6. 对图片资源进行优化</h2>
+<p>将小于某个大小的图片转化成 data URI 形式（Base64 格式）</p>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token punctuation">{</span>
+	<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+	<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+			<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
+		<span class="token punctuation">}</span>
+	<span class="token punctuation">}</span>
+<span class="token punctuation">}</span><span class="token punctuation">,</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ul>
+<li>优点：减少请求数量</li>
+<li>缺点：体积变得更大</li>
+</ul>
+<p>此时输出的图片文件就只有一张，其他图片以 data URI 形式内置到 js 中了
+（注意：需要将上次打包生成的文件清空，再重新打包才有效果）</p>
+</template>

docs/.vuepress/.temp/pages/base/9.html.js

@@ -0,0 +1,43 @@
+export const data = {
+  "key": "v-72eae0a5",
+  "path": "/base/9.html",
+  "title": "修改输出资源的名称和路径",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 配置",
+      "slug": "_1-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 修改 index.html",
+      "slug": "_2-修改-index-html",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 运行指令",
+      "slug": "_3-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/9.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/9.html.vue

@@ -0,0 +1,68 @@
+<template><h1 id="修改输出资源的名称和路径" tabindex="-1"><a class="header-anchor" href="#修改输出资源的名称和路径" aria-hidden="true">#</a> 修改输出资源的名称和路径</h1>
+<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+	<span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+		<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+		<span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+			<span class="token comment">// 省略其他 Loader</span>
+			<span class="token punctuation">{</span>
+				<span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+				<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+				<span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+					<span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+						<span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
+					<span class="token punctuation">}</span><span class="token punctuation">,</span>
+				<span class="token punctuation">}</span><span class="token punctuation">,</span>
+				<span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+					<span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
+					<span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
+					<span class="token comment">// [hash:8]: hash值取8位</span>
+					<span class="token comment">// [ext]: 使用之前的文件扩展名</span>
+					<span class="token comment">// [query]: 添加之前的query参数</span>
+					<span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+				<span class="token punctuation">}</span><span class="token punctuation">,</span>
+			<span class="token punctuation">}</span><span class="token punctuation">,</span>
+		<span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token punctuation">}</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+	<span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h2 id="_2-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_2-修改-index-html" aria-hidden="true">#</a> 2. 修改 index.html</h2>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+		<span class="token comment">&lt;!-- 修改 js 资源路径 --></span>
+		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h2 id="_3-运行指令" tabindex="-1"><a class="header-anchor" href="#_3-运行指令" aria-hidden="true">#</a> 3. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><ul>
+<li>此时输出文件目录：</li>
+</ul>
+<p>（注意：需要将上次打包生成的文件清空，再重新打包才有效果）</p>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>├── dist
+    └── static
+         ├── imgs
+         │    └── 7003350e.png
+         └── js
+              └── main.js
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div></template>

docs/.vuepress/.temp/pages/base/base.html.js

@@ -0,0 +1,74 @@
+export const data = {
+  "key": "v-a6cc4bba",
+  "path": "/base/base.html",
+  "title": "基本使用",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "功能介绍",
+      "slug": "功能介绍",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "开始使用",
+      "slug": "开始使用",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 资源目录",
+          "slug": "_1-资源目录",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 创建文件",
+          "slug": "_2-创建文件",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 下载依赖",
+          "slug": "_3-下载依赖",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 启用 Webpack",
+          "slug": "_4-启用-webpack",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 观察输出文件",
+          "slug": "_5-观察输出文件",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "小结",
+      "slug": "小结",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/base.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/base.html.vue

@@ -0,0 +1,70 @@
+<template><h1 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用" aria-hidden="true">#</a> 基本使用</h1>
+<p><strong><code>Webpack</code> 是一个静态资源打包工具。</strong></p>
+<p>它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。</p>
+<p>输出的文件就是编译好的文件，就可以在浏览器段运行了。</p>
+<p>我们将 <code>Webpack</code> 输出的文件叫做 <code>bundle</code>。</p>
+<h2 id="功能介绍" tabindex="-1"><a class="header-anchor" href="#功能介绍" aria-hidden="true">#</a> 功能介绍</h2>
+<p>Webpack 本身功能是有限的:</p>
+<ul>
+<li>开发模式：仅能编译 JS 中的 <code>ES Module</code> 语法</li>
+<li>生产模式：能编译 JS 中的 <code>ES Module</code> 语法，还能压缩 JS 代码</li>
+</ul>
+<h2 id="开始使用" tabindex="-1"><a class="header-anchor" href="#开始使用" aria-hidden="true">#</a> 开始使用</h2>
+<h3 id="_1-资源目录" tabindex="-1"><a class="header-anchor" href="#_1-资源目录" aria-hidden="true">#</a> 1. 资源目录</h3>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>webpack_code # 项目根目录（所有指令必须在这个目录运行）
+    └── src # 项目源码目录
+        ├── js # js文件目录
+        │   ├── count.js
+        │   └── sum.js
+        └── main.js # 项目主文件
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="_2-创建文件" tabindex="-1"><a class="header-anchor" href="#_2-创建文件" aria-hidden="true">#</a> 2. 创建文件</h3>
+<ul>
+<li>count.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">count</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span> y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> x <span class="token operator">-</span> y<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
+<li>sum.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">sum</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">p<span class="token punctuation">,</span> c</span><span class="token punctuation">)</span> <span class="token operator">=></span> p <span class="token operator">+</span> c<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul>
+<li>main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-下载依赖" tabindex="-1"><a class="header-anchor" href="#_3-下载依赖" aria-hidden="true">#</a> 3. 下载依赖</h3>
+<p>打开终端，来到项目根目录。运行以下指令：</p>
+<ul>
+<li>初始化<code>package.json</code></li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm init -y
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p>此时会生成一个基础的 <code>package.json</code> 文件。</p>
+<p><strong>需要注意的是 <code>package.json</code> 中 <code>name</code> 字段不能叫做 <code>webpack</code>, 否则下一步会报错</strong></p>
+<ul>
+<li>下载依赖</li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npm i webpack webpack-cli -D
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><h3 id="_4-启用-webpack" tabindex="-1"><a class="header-anchor" href="#_4-启用-webpack" aria-hidden="true">#</a> 4. 启用 Webpack</h3>
+<ul>
+<li>开发模式</li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=development
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><ul>
+<li>生产模式</li>
+</ul>
+<div class="language-text ext-text line-numbers-mode"><pre v-pre class="language-text"><code>npx webpack ./src/main.js --mode=production
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br></div></div><p><code>npx webpack</code>: 是用来运行本地安装 <code>Webpack</code> 包的。</p>
+<p><code>./src/main.js</code>: 指定 <code>Webpack</code> 从 <code>main.js</code> 文件开始打包，不但会打包 <code>main.js</code>，还会将其依赖也一起打包进来。</p>
+<p><code>--mode=xxx</code>：指定模式（环境）。</p>
+<h3 id="_5-观察输出文件" tabindex="-1"><a class="header-anchor" href="#_5-观察输出文件" aria-hidden="true">#</a> 5. 观察输出文件</h3>
+<p>默认 <code>Webpack</code> 会将文件打包输出到 <code>dist</code> 目录下，我们查看 <code>dist</code> 目录下文件情况就好了</p>
+<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
+<p><code>Webpack</code> 本身功能比较少，只能处理 <code>js</code> 资源，一旦遇到 <code>css</code> 等其他资源就会报错。</p>
+<p>所以我们学习 <code>Webpack</code>，就是主要学习如何处理其他资源。</p>
+</template>

docs/.vuepress/.temp/pages/base/clean.html.js

@@ -0,0 +1,37 @@
+export const data = {
+  "key": "v-21f1ba15",
+  "path": "/base/clean.html",
+  "title": "自动清空上次打包资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 配置",
+      "slug": "_1-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 运行指令",
+      "slug": "_2-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/clean.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/clean.html.vue

@@ -0,0 +1,57 @@
+<template><h1 id="自动清空上次打包资源" tabindex="-1"><a class="header-anchor" href="#自动清空上次打包资源" aria-hidden="true">#</a> 自动清空上次打包资源</h1>
+<h2 id="_1-配置" tabindex="-1"><a class="header-anchor" href="#_1-配置" aria-hidden="true">#</a> 1. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于40kb的图片会被base64处理</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
+          <span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
+          <span class="token comment">// [hash:8]: hash值取8位</span>
+          <span class="token comment">// [ext]: 使用之前的文件扩展名</span>
+          <span class="token comment">// [query]: 添加之前的query参数</span>
+          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br></div></div><h2 id="_2-运行指令" tabindex="-1"><a class="header-anchor" href="#_2-运行指令" aria-hidden="true">#</a> 2. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>观察 dist 目录资源情况</p>
+</template>

docs/.vuepress/.temp/pages/base/config.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-e703ecdc",
+  "path": "/base/config.html",
+  "title": "基本配置",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "5 大核心概念",
+      "slug": "_5-大核心概念",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "准备 Webpack 配置文件",
+      "slug": "准备-webpack-配置文件",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "修改配置文件",
+      "slug": "修改配置文件",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "小结",
+      "slug": "小结",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/config.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/config.html.vue

@@ -0,0 +1,82 @@
+<template><h1 id="基本配置" tabindex="-1"><a class="header-anchor" href="#基本配置" aria-hidden="true">#</a> 基本配置</h1>
+<p>在开始使用 <code>Webpack</code> 之前，我们需要对 <code>Webpack</code> 的配置有一定的认识。</p>
+<h2 id="_5-大核心概念" tabindex="-1"><a class="header-anchor" href="#_5-大核心概念" aria-hidden="true">#</a> 5 大核心概念</h2>
+<ol>
+<li>entry（入口）</li>
+</ol>
+<p>指示 Webpack 从哪个文件开始打包</p>
+<ol start="2">
+<li>output（输出）</li>
+</ol>
+<p>指示 Webpack 打包完的文件输出到哪里去，如何命名等</p>
+<ol start="3">
+<li>loader（加载器）</li>
+</ol>
+<p>webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析</p>
+<ol start="4">
+<li>plugins（插件）</li>
+</ol>
+<p>扩展 Webpack 的功能</p>
+<ol start="5">
+<li>mode（模式）</li>
+</ol>
+<p>主要由两种模式：</p>
+<ul>
+<li>开发模式：development</li>
+<li>生产模式：production</li>
+</ul>
+<h2 id="准备-webpack-配置文件" tabindex="-1"><a class="header-anchor" href="#准备-webpack-配置文件" aria-hidden="true">#</a> 准备 Webpack 配置文件</h2>
+<p>在项目根目录下新建文件：<code>webpack.config.js</code></p>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 入口</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
+  <span class="token comment">// 输出</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 加载器</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 插件</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// 模式</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><p>Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范</p>
+<h2 id="修改配置文件" tabindex="-1"><a class="header-anchor" href="#修改配置文件" aria-hidden="true">#</a> 修改配置文件</h2>
+<ol>
+<li>配置文件</li>
+</ol>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token comment">// Node.js的核心模块，专门用来处理文件路径</span>
+<span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token comment">// 入口</span>
+  <span class="token comment">// 相对路径和绝对路径都行</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token comment">// 输出</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token comment">// path: 文件输出目录，必须是绝对路径</span>
+    <span class="token comment">// path.resolve()方法返回一个绝对路径</span>
+    <span class="token comment">// __dirname 当前文件的文件夹绝对路径</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token comment">// filename: 输出文件名</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 加载器</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token comment">// 插件</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token comment">// 模式</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span> <span class="token comment">// 开发模式</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><ol start="2">
+<li>运行指令</li>
+</ol>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>此时功能和之前一样，也不能处理样式资源</p>
+<h2 id="小结" tabindex="-1"><a class="header-anchor" href="#小结" aria-hidden="true">#</a> 小结</h2>
+<p>Webpack 将来都通过 <code>webpack.config.js</code> 文件进行配置，来增强 Webpack 的功能</p>
+<p>我们后面会以两个模式来分别搭建 Webpack 的配置，先进行开发模式，再完成生产模式</p>
+</template>

docs/.vuepress/.temp/pages/base/css.html.js

@@ -0,0 +1,179 @@
+export const data = {
+  "key": "v-80c5304a",
+  "path": "/base/css.html",
+  "title": "处理样式资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "介绍",
+      "slug": "介绍",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "处理 Css 资源",
+      "slug": "处理-css-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Css 资源",
+          "slug": "_4-添加-css-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "处理 Less 资源",
+      "slug": "处理-less-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置-1",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Less 资源",
+          "slug": "_4-添加-less-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令-1",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "处理 Sass 和 Scss 资源",
+      "slug": "处理-sass-和-scss-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包-2",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍-2",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置-2",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Sass 资源",
+          "slug": "_4-添加-sass-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令-2",
+          "children": []
+        }
+      ]
+    },
+    {
+      "level": 2,
+      "title": "处理 Styl 资源",
+      "slug": "处理-styl-资源",
+      "children": [
+        {
+          "level": 3,
+          "title": "1. 下载包",
+          "slug": "_1-下载包-3",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "2. 功能介绍",
+          "slug": "_2-功能介绍-3",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "3. 配置",
+          "slug": "_3-配置-3",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "4. 添加 Styl 资源",
+          "slug": "_4-添加-styl-资源",
+          "children": []
+        },
+        {
+          "level": 3,
+          "title": "5. 运行指令",
+          "slug": "_5-运行指令-3",
+          "children": []
+        }
+      ]
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/css.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/css.html.vue

@@ -0,0 +1,337 @@
+<template><h1 id="处理样式资源" tabindex="-1"><a class="header-anchor" href="#处理样式资源" aria-hidden="true">#</a> 处理样式资源</h1>
+<p>本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源</p>
+<h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2>
+<p>Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源</p>
+<p>我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用</p>
+<p>官方文档找不到的话，可以从社区 Github 中搜索查询</p>
+<p><a href="https://webpack.docschina.org/loaders/" target="_blank" rel="noopener noreferrer">Webpack 官方 Loader 文档<ExternalLinkIcon/></a></p>
+<h2 id="处理-css-资源" tabindex="-1"><a class="header-anchor" href="#处理-css-资源" aria-hidden="true">#</a> 处理 Css 资源</h2>
+<h3 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i css-loader style-loader -D
+</code></pre></div><p>注意：需要下载两个 loader</p>
+<h3 id="_2-功能介绍" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>css-loader</code>：负责将 Css 文件编译成 Webpack 能识别的模块</li>
+<li><code>style-loader</code>：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容</li>
+</ul>
+<p>此时样式就会以 Style 标签的形式在页面上生效</p>
+<h3 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><h3 id="_4-添加-css-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-css-资源" aria-hidden="true">#</a> 4. 添加 Css 资源</h3>
+<ul>
+<li>src/css/index.css</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box1</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入 Css 资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 准备一个使用样式的 DOM 容器 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 引入打包后的js文件，才能看到效果 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="_5-运行指令" tabindex="-1"><a class="header-anchor" href="#_5-运行指令" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="处理-less-资源" tabindex="-1"><a class="header-anchor" href="#处理-less-资源" aria-hidden="true">#</a> 处理 Less 资源</h2>
+<h3 id="_1-下载包-1" tabindex="-1"><a class="header-anchor" href="#_1-下载包-1" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i less-loader -D
+</code></pre></div><h3 id="_2-功能介绍-1" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-1" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>less-loader</code>：负责将 Less 文件编译成 Css 文件</li>
+</ul>
+<h3 id="_3-配置-1" tabindex="-1"><a class="header-anchor" href="#_3-配置-1" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h3 id="_4-添加-less-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-less-资源" aria-hidden="true">#</a> 4. 添加 Less 资源</h3>
+<ul>
+<li>src/less/index.less</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box2</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><h3 id="_5-运行指令-1" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-1" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="处理-sass-和-scss-资源" tabindex="-1"><a class="header-anchor" href="#处理-sass-和-scss-资源" aria-hidden="true">#</a> 处理 Sass 和 Scss 资源</h2>
+<h3 id="_1-下载包-2" tabindex="-1"><a class="header-anchor" href="#_1-下载包-2" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i sass-loader sass -D
+</code></pre></div><p>注意：需要下载两个</p>
+<h3 id="_2-功能介绍-2" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-2" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>sass-loader</code>：负责将 Sass 文件编译成 css 文件</li>
+<li><code>sass</code>：<code>sass-loader</code> 依赖 <code>sass</code> 进行编译</li>
+</ul>
+<h3 id="_3-配置-2" tabindex="-1"><a class="header-anchor" href="#_3-配置-2" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><h3 id="_4-添加-sass-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-sass-资源" aria-hidden="true">#</a> 4. 添加 Sass 资源</h3>
+<ul>
+<li>src/sass/index.sass</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号和分号 */</span>
+.box3
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px
+  <span class="token property">background-color</span><span class="token punctuation">:</span> hotpink
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/sass/index.scss</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token selector">.box4</span> <span class="token punctuation">{</span>
+  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
+  <span class="token property">background-color</span><span class="token punctuation">:</span> lightpink<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="_5-运行指令-2" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-2" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+<h2 id="处理-styl-资源" tabindex="-1"><a class="header-anchor" href="#处理-styl-资源" aria-hidden="true">#</a> 处理 Styl 资源</h2>
+<h3 id="_1-下载包-3" tabindex="-1"><a class="header-anchor" href="#_1-下载包-3" aria-hidden="true">#</a> 1. 下载包</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i stylus-loader -D
+</code></pre></div><h3 id="_2-功能介绍-3" tabindex="-1"><a class="header-anchor" href="#_2-功能介绍-3" aria-hidden="true">#</a> 2. 功能介绍</h3>
+<ul>
+<li><code>stylus-loader</code>：负责将 Styl 文件编译成 Css 文件</li>
+</ul>
+<h3 id="_3-配置-3" tabindex="-1"><a class="header-anchor" href="#_3-配置-3" aria-hidden="true">#</a> 3. 配置</h3>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"main.js"</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br></div></div><h3 id="_4-添加-styl-资源" tabindex="-1"><a class="header-anchor" href="#_4-添加-styl-资源" aria-hidden="true">#</a> 4. 添加 Styl 资源</h3>
+<ul>
+<li>src/styl/index.styl</li>
+</ul>
+<div class="language-css ext-css line-numbers-mode"><pre v-pre class="language-css"><code><span class="token comment">/* 可以省略大括号、分号、冒号 */</span>
+.box 
+  width 100px 
+  height 100px 
+  background-color pink
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul>
+<li>src/main.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 准备一个使用样式的 DOM 容器 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="_5-运行指令-3" tabindex="-1"><a class="header-anchor" href="#_5-运行指令-3" aria-hidden="true">#</a> 5. 运行指令</h3>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/development.html.js

@@ -0,0 +1,24 @@
+export const data = {
+  "key": "v-34029aa3",
+  "path": "/base/development.html",
+  "title": "开发模式介绍",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [],
+  "git": {},
+  "filePathRelative": "base/development.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/development.html.vue

@@ -0,0 +1,13 @@
+<template><h1 id="开发模式介绍" tabindex="-1"><a class="header-anchor" href="#开发模式介绍" aria-hidden="true">#</a> 开发模式介绍</h1>
+<p>开发模式顾名思义就是我们开发代码时使用的模式。</p>
+<p>这个模式下我们主要做两件事：</p>
+<ol>
+<li>编译代码，使浏览器能识别运行</li>
+</ol>
+<p>开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源</p>
+<ol start="2">
+<li>代码质量检查，树立代码规范</li>
+</ol>
+<p>提前检查代码的一些隐患，让代码运行时能更加健壮。</p>
+<p>提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。</p>
+</template>

docs/.vuepress/.temp/pages/base/font.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-85d4d936",
+  "path": "/base/font.html",
+  "title": "处理字体图标资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载字体图标文件",
+      "slug": "_1-下载字体图标文件",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 添加字体图标资源",
+      "slug": "_2-添加字体图标资源",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 配置",
+      "slug": "_3-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 运行指令",
+      "slug": "_4-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/font.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/font.html.vue

@@ -0,0 +1,137 @@
+<template><h1 id="处理字体图标资源" tabindex="-1"><a class="header-anchor" href="#处理字体图标资源" aria-hidden="true">#</a> 处理字体图标资源</h1>
+<h2 id="_1-下载字体图标文件" tabindex="-1"><a class="header-anchor" href="#_1-下载字体图标文件" aria-hidden="true">#</a> 1. 下载字体图标文件</h2>
+<ol>
+<li>
+<p>打开<a href="https://www.iconfont.cn/" target="_blank" rel="noopener noreferrer">阿里巴巴矢量图标库<ExternalLinkIcon/></a></p>
+</li>
+<li>
+<p>选择想要的图标添加到购物车，统一下载到本地</p>
+</li>
+</ol>
+<h2 id="_2-添加字体图标资源" tabindex="-1"><a class="header-anchor" href="#_2-添加字体图标资源" aria-hidden="true">#</a> 2. 添加字体图标资源</h2>
+<ul>
+<li>
+<p>src/fonts/iconfont.ttf</p>
+</li>
+<li>
+<p>src/fonts/iconfont.woff</p>
+</li>
+<li>
+<p>src/fonts/iconfont.woff2</p>
+</li>
+<li>
+<p>src/css/iconfont.css</p>
+<ul>
+<li>注意字体文件路径需要修改</li>
+</ul>
+</li>
+<li>
+<p>src/main.js</p>
+</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> add <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"./math"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> count <span class="token keyword">from</span> <span class="token string">"./js/count"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> sum <span class="token keyword">from</span> <span class="token string">"./js/sum"</span><span class="token punctuation">;</span>
+<span class="token comment">// 引入资源，Webpack才会对其打包</span>
+<span class="token keyword">import</span> <span class="token string">"./css/iconfont.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./css/index.css"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./less/index.less"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.sass"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./sass/index.scss"</span><span class="token punctuation">;</span>
+<span class="token keyword">import</span> <span class="token string">"./styl/index.styl"</span><span class="token punctuation">;</span>
+
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">sum</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><div class="highlight-line">&nbsp;</div><br><br><br><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ul>
+<li>public/index.html</li>
+</ul>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token comment">&lt;!-- 使用字体图标 --></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../dist/static/js/main.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><h2 id="_3-配置" tabindex="-1"><a class="header-anchor" href="#_3-配置" aria-hidden="true">#</a> 3. 配置</h2>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
+    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
+          <span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
+          <span class="token comment">// [hash:8]: hash值取8位</span>
+          <span class="token comment">// [ext]: 使用之前的文件扩展名</span>
+          <span class="token comment">// [query]: 添加之前的query参数</span>
+          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br></div></div><p><code>type: &quot;asset/resource&quot;</code>和<code>type: &quot;asset&quot;</code>的区别：</p>
+<ol>
+<li><code>type: &quot;asset/resource&quot;</code> 相当于<code>file-loader</code>, 将文件转化成 Webpack 能识别的资源，其他不做处理</li>
+<li><code>type: &quot;asset&quot;</code> 相当于<code>url-loader</code>, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式</li>
+</ol>
+<h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>打开 index.html 页面查看效果</p>
+</template>

docs/.vuepress/.temp/pages/base/html.html.js

@@ -0,0 +1,49 @@
+export const data = {
+  "key": "v-ab115cee",
+  "path": "/base/html.html",
+  "title": "处理 Html 资源",
+  "lang": "zh-CN",
+  "frontmatter": {},
+  "excerpt": "",
+  "headers": [
+    {
+      "level": 2,
+      "title": "1. 下载包",
+      "slug": "_1-下载包",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "2. 配置",
+      "slug": "_2-配置",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "3. 修改 index.html",
+      "slug": "_3-修改-index-html",
+      "children": []
+    },
+    {
+      "level": 2,
+      "title": "4. 运行指令",
+      "slug": "_4-运行指令",
+      "children": []
+    }
+  ],
+  "git": {},
+  "filePathRelative": "base/html.md"
+}
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept()
+  if (__VUE_HMR_RUNTIME__.updatePageData) {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  }
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept(({ data }) => {
+    __VUE_HMR_RUNTIME__.updatePageData(data)
+  })
+}

docs/.vuepress/.temp/pages/base/html.html.vue

@@ -0,0 +1,108 @@
+<template><h1 id="处理-html-资源" tabindex="-1"><a class="header-anchor" href="#处理-html-资源" aria-hidden="true">#</a> 处理 Html 资源</h1>
+<h2 id="_1-下载包" tabindex="-1"><a class="header-anchor" href="#_1-下载包" aria-hidden="true">#</a> 1. 下载包</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npm i html-webpack-plugin -D
+</code></pre></div><h2 id="_2-配置" tabindex="-1"><a class="header-anchor" href="#_2-配置" aria-hidden="true">#</a> 2. 配置</h2>
+<ul>
+<li>webpack.config.js</li>
+</ul>
+<div class="language-javascript ext-js line-numbers-mode"><pre v-pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> ESLintWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"eslint-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"html-webpack-plugin"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+
+module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
+  <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">"./src/main.js"</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/js/main.js"</span><span class="token punctuation">,</span> <span class="token comment">// 将 js 文件输出到 static/js 目录中</span>
+    <span class="token literal-property property">clean</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 自动将上次打包目录资源清空</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+    <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+      <span class="token punctuation">{</span>
+        <span class="token comment">// 用来匹配 .css 结尾的文件</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token comment">// use 数组里面 Loader 执行顺序是从右到左</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.less$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"less-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.s[ac]ss$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"sass-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.styl$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"style-loader"</span><span class="token punctuation">,</span> <span class="token string">"css-loader"</span><span class="token punctuation">,</span> <span class="token string">"stylus-loader"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|jpe?g|gif|webp)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset"</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">parser</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">dataUrlCondition</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+            <span class="token literal-property property">maxSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span> <span class="token comment">// 小于10kb的图片会被base64处理</span>
+          <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token comment">// 将图片文件输出到 static/imgs 目录中</span>
+          <span class="token comment">// 将图片文件命名 [hash:8][ext][query]</span>
+          <span class="token comment">// [hash:8]: hash值取8位</span>
+          <span class="token comment">// [ext]: 使用之前的文件扩展名</span>
+          <span class="token comment">// [query]: 添加之前的query参数</span>
+          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/imgs/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(ttf|woff2?)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"asset/resource"</span><span class="token punctuation">,</span>
+        <span class="token literal-property property">generator</span><span class="token operator">:</span> <span class="token punctuation">{</span>
+          <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">"static/media/[hash:8][ext][query]"</span><span class="token punctuation">,</span>
+        <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+      <span class="token punctuation">{</span>
+        <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
+        <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token comment">// 排除node_modules代码不编译</span>
+        <span class="token literal-property property">loader</span><span class="token operator">:</span> <span class="token string">"babel-loader"</span><span class="token punctuation">,</span>
+      <span class="token punctuation">}</span><span class="token punctuation">,</span>
+    <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token punctuation">}</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>
+    <span class="token keyword">new</span> <span class="token class-name">ESLintWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token comment">// 指定检查文件的根目录</span>
+      <span class="token literal-property property">context</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+      <span class="token comment">// 以 public/index.html 为模板创建文件</span>
+      <span class="token comment">// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源</span>
+      <span class="token literal-property property">template</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"public/index.html"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
+  <span class="token punctuation">]</span><span class="token punctuation">,</span>
+  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">"development"</span><span class="token punctuation">,</span>
+<span class="token punctuation">}</span><span class="token punctuation">;</span>
+</code></pre><div class="highlight-lines"><br><br><div class="highlight-line">&nbsp;</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><div class="highlight-line">&nbsp;</div><br><br><br></div><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br></div></div><h2 id="_3-修改-index-html" tabindex="-1"><a class="header-anchor" href="#_3-修改-index-html" aria-hidden="true">#</a> 3. 修改 index.html</h2>
+<p>去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入</p>
+<div class="language-html ext-html line-numbers-mode"><pre v-pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>IE=edge<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>Hello Webpack5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-arrow-down<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-ashbin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconfont icon-browse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
+</code></pre><div class="line-numbers" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h2 id="_4-运行指令" tabindex="-1"><a class="header-anchor" href="#_4-运行指令" aria-hidden="true">#</a> 4. 运行指令</h2>
+<div class="language-text ext-text"><pre v-pre class="language-text"><code>npx webpack
+</code></pre></div><p>此时 dist 目录就会输出一个 index.html 文件</p>
+</template>