Accueil Explorer Aide
S'inscrire Connexion
NiceTry12138
/
MarkdownLog
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

feat: 添加 html 复制和全局定义的插件

Nicetry12138 il y a 11 mois
Parent
def183403c
commit
8a9d662359
7 fichiers modifiés avec 462 ajouts et 3 suppressions
Vue unifiée Afficher les stats Diff
  1. BIN
      前端/Webpack/Image/015.png
  2. 118 0
      前端/Webpack/README.md
  3. 1 0
      前端/Webpack/src/06/build/index.html
  4. 1 2
      前端/Webpack/src/06/index.html
  5. 331 0
      前端/Webpack/src/06/package-lock.json
  6. 1 0
      前端/Webpack/src/06/package.json
  7. 10 1
      前端/Webpack/src/06/webpack.config.js

BIN
前端/Webpack/Image/015.png
Voir le fichier


+ 118 - 0
前端/Webpack/README.md
Voir le fichier 

@@ -960,3 +960,121 @@ module.exports = {
 
 
 
 此时如果在 `build` 文件夹中添加任意个文件，在执行 `npx webpack` 打包之后，`build` 文件夹会被清空，然后再进行打包
 
 此时如果在 `build` 文件夹中添加任意个文件，在执行 `npx webpack` 打包之后，`build` 文件夹会被清空，然后再进行打包
 
 
 
+还记得前面例子中，在 `index.html` 中如何引入 `script` 吗？
 
+
 
+```js
 
+<script src="./build/bundle.js" ></script>
 
+```
 
+
 
+这明显是错误的，因为他应该引用的是同级目录的 js 文件，而不应该直接引用发布文件夹的中，也就是应该是下面这样
 
+
 
+```js
 
+<script src="./bundle.js" ></script>
 
+```
 
+
 
+此时可以使用 `html-webpack-plugin` 来实现这个功能
 
+
 
+```js
 
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
+const HtmlWebpackPlugin = require(`html-webpack-plugin`)
 
+
 
+module.exports = {
 
+    entry: "./src/index.js",
 
+    output: {
 
+        filename: "./bundle.js",
 
+        path: path.resolve(__dirname, "./build")
 
+    },    
+    module: {
 
+        rules: [
 
+            // rules
 
+        ]
 
+    },
 
+    plugins: [
 
+        new CleanWebpackPlugin(),
 
+        new HtmlWebpackPlugin(),
 
+    ]
 
+}
 
+```
 
+
 
+最后会生成一个 `index.html`
 
+
 
+```js
 
+<!doctype html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title>Webpack App</title>
 
+		<meta name="viewport" content="width=device-width,initial-scale=1">
 
+		<script defer="defer" src="./bundle.js"></script>
 
+	</head>
 
+	<body></body>
 
+</html>
 
+```
 
+
 
+虽然它生成了 `index.html`，但这个不是我想要的 `html`，因为 `html-webpack-plugin` 中内置了一个 ejs 的模板，根据这个模板生成的 `html`
 
+
 
+![](Image/015.png)
 
+
 
+> `html-webpack-plugin` 中默认的 ejs 的 html 模板
 
+
 
+可以通过外部传入配置的方式，修改 html 模板
 
+
 
+```js
 
+plugins: [
 
+    new CleanWebpackPlugin(),
 
+    new HtmlWebpackPlugin({
 
+        template: "./index.html"
 
+    }),
 
+]
 
+```
 
+
 
+如果 你使用了到了全局常量，比如 Vue 中有定义 `BASE_URL` 
+
 
+```html
 
+<!doctype html>
 
+<html>
 
+	<head>
 
+		<meta charset="utf-8">
 
+		<title>Webpack App</title>
 
+        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+	</head>
 
+	<body></body>
 
+</html>
 
+```
 
+
 
+如果想要定义**全局常量**，需要使用到另一个插件 `DefinePlugin`，这个插件内置在 webpack 中，无需安装
 
+
 
+```js
 
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
+const HtmlWebpackPlugin = require(`html-webpack-plugin`)
 
+const { DefinePlugin } = require('webpack')
 
+
 
+module.exports = {
 
+    entry: "./src/index.js",
 
+    output: {
 
+        filename: "./bundle.js",
 
+        path: path.resolve(__dirname, "./build")
 
+    },    
+    module: {
 
+        rules: [
 
+            // ...
 
+        ]
 
+    },
 
+    plugins: [
 
+        new CleanWebpackPlugin(),
 
+        new HtmlWebpackPlugin({
 
+            template: "./index.html"
 
+        }),
 
+        new DefinePlugin({
 
+            BASE_URL: '"./"'
 
+        }),
 
+    ]
 
+}
 
+```
 
+
 
+注意这里对 `BASE_URL: '"./"'` 的处理
 
+
 
+如果直接 `BASE_URL: "./"`，那么在定义的时候是 `const BASE_URL = ./` 这对 js 来说是错误的写法
 
+
 
+也可以从这点窥探到，如果 `Define` 的是 `String`，它会直接把字符串的内容定义到值上
 
+

+ 1 - 0
前端/Webpack/src/06/build/index.html
Voir le fichier 

@@ -0,0 +1 @@
 
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Webpack Project</title><script defer="defer" src="./bundle.js"></script></head><body><h1>Welcome to Webpack Project</h1><link rel="icon" href="./favicon.ico"></body></html>

+ 1 - 2
前端/Webpack/src/06/index.html
Voir le fichier 

@@ -7,7 +7,6 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
     <h1>Welcome to Webpack Project</h1>
 
     <h1>Welcome to Webpack Project</h1>
 
-    <script src="./build/bundle.js" ></script>
 
-    <!-- <script src="./dist/main.js" ></script> -->
 
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 331 - 0
前端/Webpack/src/06/package-lock.json
Voir le fichier 

@@ -13,6 +13,7 @@
 
         "browserslist": "^4.24.4",
 
         "browserslist": "^4.24.4",
 
         "clean-webpack-plugin": "^4.0.0",
 
         "clean-webpack-plugin": "^4.0.0",
 
         "css-loader": "^7.1.2",
 
         "css-loader": "^7.1.2",
 
+        "html-webpack-plugin": "^5.6.3",
 
         "less": "^4.2.2",
 
         "less": "^4.2.2",
 
         "less-loader": "^12.2.0",
 
         "less-loader": "^12.2.0",
 
         "postcss": "^8.5.2",
 
         "postcss": "^8.5.2",
 
@@ -1557,6 +1558,12 @@
 
         "@types/node": "*"
 
         "@types/node": "*"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/@types/html-minifier-terser": {
 
+      "version": "6.1.0",
 
+      "resolved": "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
 
+      "integrity": "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==",
 
+      "dev": true
 
+    },
 
     "node_modules/@types/json-schema": {
 
     "node_modules/@types/json-schema": {
 
       "version": "7.0.15",
 
       "version": "7.0.15",
 
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
 
       "resolved": "https://registry.npmmirror.com/@types/json-schema/-/json-schema-7.0.15.tgz",
 
@@ -1975,6 +1982,12 @@
 
         "url": "https://github.com/sponsors/sindresorhus"
 
         "url": "https://github.com/sponsors/sindresorhus"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/boolbase": {
 
+      "version": "1.0.0",
 
+      "resolved": "https://registry.npmmirror.com/boolbase/-/boolbase-1.0.0.tgz",
 
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
 
+      "dev": true
 
+    },
 
     "node_modules/brace-expansion": {
 
     "node_modules/brace-expansion": {
 
       "version": "1.1.11",
 
       "version": "1.1.11",
 
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
 
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
 
@@ -2044,6 +2057,16 @@
 
         "node": ">=6"
 
         "node": ">=6"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/camel-case": {
 
+      "version": "4.1.2",
 
+      "resolved": "https://registry.npmmirror.com/camel-case/-/camel-case-4.1.2.tgz",
 
+      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "pascal-case": "^3.1.2",
 
+        "tslib": "^2.0.3"
 
+      }
 
+    },
 
     "node_modules/caniuse-lite": {
 
     "node_modules/caniuse-lite": {
 
       "version": "1.0.30001699",
 
       "version": "1.0.30001699",
 
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
 
       "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz",
 
@@ -2097,6 +2120,18 @@
 
         "node": ">=6.0"
 
         "node": ">=6.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/clean-css": {
 
+      "version": "5.3.3",
 
+      "resolved": "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.3.tgz",
 
+      "integrity": "sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "source-map": "~0.6.0"
 
+      },
 
+      "engines": {
 
+        "node": ">= 10.0"
 
+      }
 
+    },
 
     "node_modules/clean-webpack-plugin": {
 
     "node_modules/clean-webpack-plugin": {
 
       "version": "4.0.0",
 
       "version": "4.0.0",
 
       "resolved": "https://registry.npmmirror.com/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz",
 
@@ -2337,6 +2372,34 @@
 
         "postcss": "^8.4"
 
         "postcss": "^8.4"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/css-select": {
 
+      "version": "4.3.0",
 
+      "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
 
+      "integrity": "sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "boolbase": "^1.0.0",
 
+        "css-what": "^6.0.1",
 
+        "domhandler": "^4.3.1",
 
+        "domutils": "^2.8.0",
 
+        "nth-check": "^2.0.1"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/fb55"
 
+      }
 
+    },
 
+    "node_modules/css-what": {
 
+      "version": "6.1.0",
 
+      "resolved": "https://registry.npmmirror.com/css-what/-/css-what-6.1.0.tgz",
 
+      "integrity": "sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">= 6"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/sponsors/fb55"
 
+      }
 
+    },
 
     "node_modules/cssdb": {
 
     "node_modules/cssdb": {
 
       "version": "8.2.3",
 
       "version": "8.2.3",
 
       "resolved": "https://registry.npmmirror.com/cssdb/-/cssdb-8.2.3.tgz",
 
       "resolved": "https://registry.npmmirror.com/cssdb/-/cssdb-8.2.3.tgz",
 
@@ -2430,6 +2493,80 @@
 
         "node": ">=0.10"
 
         "node": ">=0.10"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/dom-converter": {
 
+      "version": "0.2.0",
 
+      "resolved": "https://registry.npmmirror.com/dom-converter/-/dom-converter-0.2.0.tgz",
 
+      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "utila": "~0.4"
 
+      }
 
+    },
 
+    "node_modules/dom-serializer": {
 
+      "version": "1.4.1",
 
+      "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-1.4.1.tgz",
 
+      "integrity": "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "domelementtype": "^2.0.1",
 
+        "domhandler": "^4.2.0",
 
+        "entities": "^2.0.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
 
+      }
 
+    },
 
+    "node_modules/domelementtype": {
 
+      "version": "2.3.0",
 
+      "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
 
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
 
+      "dev": true,
 
+      "funding": [
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/fb55"
 
+        }
 
+      ]
 
+    },
 
+    "node_modules/domhandler": {
 
+      "version": "4.3.1",
 
+      "resolved": "https://registry.npmmirror.com/domhandler/-/domhandler-4.3.1.tgz",
 
+      "integrity": "sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "domelementtype": "^2.2.0"
 
+      },
 
+      "engines": {
 
+        "node": ">= 4"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
 
+      }
 
+    },
 
+    "node_modules/domutils": {
 
+      "version": "2.8.0",
 
+      "resolved": "https://registry.npmmirror.com/domutils/-/domutils-2.8.0.tgz",
 
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "dom-serializer": "^1.0.1",
 
+        "domelementtype": "^2.2.0",
 
+        "domhandler": "^4.2.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/fb55/domutils?sponsor=1"
 
+      }
 
+    },
 
+    "node_modules/dot-case": {
 
+      "version": "3.0.4",
 
+      "resolved": "https://registry.npmmirror.com/dot-case/-/dot-case-3.0.4.tgz",
 
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "no-case": "^3.0.4",
 
+        "tslib": "^2.0.3"
 
+      }
 
+    },
 
     "node_modules/electron-to-chromium": {
 
     "node_modules/electron-to-chromium": {
 
       "version": "1.5.97",
 
       "version": "1.5.97",
 
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz",
 
       "resolved": "https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz",
 
@@ -2455,6 +2592,15 @@
 
         "node": ">=10.13.0"
 
         "node": ">=10.13.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/entities": {
 
+      "version": "2.2.0",
 
+      "resolved": "https://registry.npmmirror.com/entities/-/entities-2.2.0.tgz",
 
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
 
+      "dev": true,
 
+      "funding": {
 
+        "url": "https://github.com/fb55/entities?sponsor=1"
 
+      }
 
+    },
 
     "node_modules/env-paths": {
 
     "node_modules/env-paths": {
 
       "version": "2.2.1",
 
       "version": "2.2.1",
 
       "resolved": "https://registry.npmmirror.com/env-paths/-/env-paths-2.2.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/env-paths/-/env-paths-2.2.1.tgz",
 
@@ -2824,6 +2970,96 @@
 
         "node": ">= 0.4"
 
         "node": ">= 0.4"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/he": {
 
+      "version": "1.2.0",
 
+      "resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
 
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
 
+      "dev": true,
 
+      "bin": {
 
+        "he": "bin/he"
 
+      }
 
+    },
 
+    "node_modules/html-minifier-terser": {
 
+      "version": "6.1.0",
 
+      "resolved": "https://registry.npmmirror.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
 
+      "integrity": "sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "camel-case": "^4.1.2",
 
+        "clean-css": "^5.2.2",
 
+        "commander": "^8.3.0",
 
+        "he": "^1.2.0",
 
+        "param-case": "^3.0.4",
 
+        "relateurl": "^0.2.7",
 
+        "terser": "^5.10.0"
 
+      },
 
+      "bin": {
 
+        "html-minifier-terser": "cli.js"
 
+      },
 
+      "engines": {
 
+        "node": ">=12"
 
+      }
 
+    },
 
+    "node_modules/html-minifier-terser/node_modules/commander": {
 
+      "version": "8.3.0",
 
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-8.3.0.tgz",
 
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">= 12"
 
+      }
 
+    },
 
+    "node_modules/html-webpack-plugin": {
 
+      "version": "5.6.3",
 
+      "resolved": "https://registry.npmmirror.com/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
 
+      "integrity": "sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "@types/html-minifier-terser": "^6.0.0",
 
+        "html-minifier-terser": "^6.0.2",
 
+        "lodash": "^4.17.21",
 
+        "pretty-error": "^4.0.0",
 
+        "tapable": "^2.0.0"
 
+      },
 
+      "engines": {
 
+        "node": ">=10.13.0"
 
+      },
 
+      "funding": {
 
+        "type": "opencollective",
 
+        "url": "https://opencollective.com/html-webpack-plugin"
 
+      },
 
+      "peerDependencies": {
 
+        "@rspack/core": "0.x || 1.x",
 
+        "webpack": "^5.20.0"
 
+      },
 
+      "peerDependenciesMeta": {
 
+        "@rspack/core": {
 
+          "optional": true
 
+        },
 
+        "webpack": {
 
+          "optional": true
 
+        }
 
+      }
 
+    },
 
+    "node_modules/htmlparser2": {
 
+      "version": "6.1.0",
 
+      "resolved": "https://registry.npmmirror.com/htmlparser2/-/htmlparser2-6.1.0.tgz",
 
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
 
+      "dev": true,
 
+      "funding": [
 
+        "https://github.com/fb55/htmlparser2?sponsor=1",
 
+        {
 
+          "type": "github",
 
+          "url": "https://github.com/sponsors/fb55"
 
+        }
 
+      ],
 
+      "dependencies": {
 
+        "domelementtype": "^2.0.1",
 
+        "domhandler": "^4.0.0",
 
+        "domutils": "^2.5.2",
 
+        "entities": "^2.0.0"
 
+      }
 
+    },
 
     "node_modules/iconv-lite": {
 
     "node_modules/iconv-lite": {
 
       "version": "0.6.3",
 
       "version": "0.6.3",
 
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
 
       "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
 
@@ -3241,6 +3477,21 @@
 
         "node": ">=8"
 
         "node": ">=8"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/lodash": {
 
+      "version": "4.17.21",
 
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
 
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
 
+      "dev": true
 
+    },
 
+    "node_modules/lower-case": {
 
+      "version": "2.0.2",
 
+      "resolved": "https://registry.npmmirror.com/lower-case/-/lower-case-2.0.2.tgz",
 
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "tslib": "^2.0.3"
 
+      }
 
+    },
 
     "node_modules/make-dir": {
 
     "node_modules/make-dir": {
 
       "version": "2.1.0",
 
       "version": "2.1.0",
 
       "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
 
@@ -3380,6 +3631,16 @@
 
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
 
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
 
       "dev": true
 
       "dev": true
 
     },
 
     },
 
+    "node_modules/no-case": {
 
+      "version": "3.0.4",
 
+      "resolved": "https://registry.npmmirror.com/no-case/-/no-case-3.0.4.tgz",
 
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "lower-case": "^2.0.2",
 
+        "tslib": "^2.0.3"
 
+      }
 
+    },
 
     "node_modules/node-addon-api": {
 
     "node_modules/node-addon-api": {
 
       "version": "7.1.1",
 
       "version": "7.1.1",
 
       "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/node-addon-api/-/node-addon-api-7.1.1.tgz",
 
@@ -3411,6 +3672,18 @@
 
         "node": ">=0.10.0"
 
         "node": ">=0.10.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/nth-check": {
 
+      "version": "2.1.1",
 
+      "resolved": "https://registry.npmmirror.com/nth-check/-/nth-check-2.1.1.tgz",
 
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "boolbase": "^1.0.0"
 
+      },
 
+      "funding": {
 
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
 
+      }
 
+    },
 
     "node_modules/object-assign": {
 
     "node_modules/object-assign": {
 
       "version": "4.1.1",
 
       "version": "4.1.1",
 
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
 
@@ -3474,6 +3747,16 @@
 
         "node": ">=6"
 
         "node": ">=6"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/param-case": {
 
+      "version": "3.0.4",
 
+      "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
 
+      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "dot-case": "^3.0.4",
 
+        "tslib": "^2.0.3"
 
+      }
 
+    },
 
     "node_modules/parent-module": {
 
     "node_modules/parent-module": {
 
       "version": "1.0.1",
 
       "version": "1.0.1",
 
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz",
 
@@ -3513,6 +3796,16 @@
 
         "node": ">= 0.10"
 
         "node": ">= 0.10"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/pascal-case": {
 
+      "version": "3.1.2",
 
+      "resolved": "https://registry.npmmirror.com/pascal-case/-/pascal-case-3.1.2.tgz",
 
+      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "no-case": "^3.0.4",
 
+        "tslib": "^2.0.3"
 
+      }
 
+    },
 
     "node_modules/path-exists": {
 
     "node_modules/path-exists": {
 
       "version": "4.0.0",
 
       "version": "4.0.0",
 
       "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
 
       "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
 
@@ -4528,6 +4821,16 @@
 
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 
       "dev": true
 
       "dev": true
 
     },
 
     },
 
+    "node_modules/pretty-error": {
 
+      "version": "4.0.0",
 
+      "resolved": "https://registry.npmmirror.com/pretty-error/-/pretty-error-4.0.0.tgz",
 
+      "integrity": "sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "lodash": "^4.17.20",
 
+        "renderkid": "^3.0.0"
 
+      }
 
+    },
 
     "node_modules/pretty-hrtime": {
 
     "node_modules/pretty-hrtime": {
 
       "version": "1.0.3",
 
       "version": "1.0.3",
 
       "resolved": "https://registry.npmmirror.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
 
       "resolved": "https://registry.npmmirror.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
 
@@ -4624,6 +4927,28 @@
 
         "node": ">= 10.13.0"
 
         "node": ">= 10.13.0"
 
       }
 
       }
 
     },
 
     },
 
+    "node_modules/relateurl": {
 
+      "version": "0.2.7",
 
+      "resolved": "https://registry.npmmirror.com/relateurl/-/relateurl-0.2.7.tgz",
 
+      "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==",
 
+      "dev": true,
 
+      "engines": {
 
+        "node": ">= 0.10"
 
+      }
 
+    },
 
+    "node_modules/renderkid": {
 
+      "version": "3.0.0",
 
+      "resolved": "https://registry.npmmirror.com/renderkid/-/renderkid-3.0.0.tgz",
 
+      "integrity": "sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==",
 
+      "dev": true,
 
+      "dependencies": {
 
+        "css-select": "^4.1.3",
 
+        "dom-converter": "^0.2.0",
 
+        "htmlparser2": "^6.1.0",
 
+        "lodash": "^4.17.21",
 
+        "strip-ansi": "^6.0.1"
 
+      }
 
+    },
 
     "node_modules/require-directory": {
 
     "node_modules/require-directory": {
 
       "version": "2.1.1",
 
       "version": "2.1.1",
 
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
 
       "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz",
 
@@ -5251,6 +5576,12 @@
 
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
 
       "dev": true
 
       "dev": true
 
     },
 
     },
 
+    "node_modules/utila": {
 
+      "version": "0.4.0",
 
+      "resolved": "https://registry.npmmirror.com/utila/-/utila-0.4.0.tgz",
 
+      "integrity": "sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==",
 
+      "dev": true
 
+    },
 
     "node_modules/watchpack": {
 
     "node_modules/watchpack": {
 
       "version": "2.4.2",
 
       "version": "2.4.2",
 
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",
 
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",

+ 1 - 0
前端/Webpack/src/06/package.json
Voir le fichier 

@@ -15,6 +15,7 @@
 
     "browserslist": "^4.24.4",
 
     "browserslist": "^4.24.4",
 
     "clean-webpack-plugin": "^4.0.0",
 
     "clean-webpack-plugin": "^4.0.0",
 
     "css-loader": "^7.1.2",
 
     "css-loader": "^7.1.2",
 
+    "html-webpack-plugin": "^5.6.3",
 
     "less": "^4.2.2",
 
     "less": "^4.2.2",
 
     "less-loader": "^12.2.0",
 
     "less-loader": "^12.2.0",
 
     "postcss": "^8.5.2",
 
     "postcss": "^8.5.2",

+ 10 - 1
前端/Webpack/src/06/webpack.config.js
Voir le fichier 

@@ -1,6 +1,8 @@
 
 const path = require("path")
 
 const path = require("path")
 
 
 
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
+const HtmlWebpackPlugin = require(`html-webpack-plugin`)
 
+const { DefinePlugin } = require('webpack')
 
 
 
 module.exports = {
 
 module.exports = {
 
     entry: "./src/index.js",
 
     entry: "./src/index.js",
 
@@ -57,5 +59,12 @@ module.exports = {
 
     },
 
     },
 
     plugins: [
 
     plugins: [
 
         new CleanWebpackPlugin(),
 
         new CleanWebpackPlugin(),
 
+        new HtmlWebpackPlugin({
 
+            template: "./index.html"
 
+        }),
 
+        new DefinePlugin({
 
+            BASE_URL: '"./"'
 
+        }),
 
     ]
 
     ]
 
-}
 
+}
 
+