From f94298840017c7265ad2bf53ebd7fd7212437e8c Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Mon, 23 May 2022 11:42:37 +0800
Subject: [PATCH] fix

---
 blog/php-mysql/index.md |   2 +-
 blog/webpack/index.md   | 146 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 146 insertions(+), 2 deletions(-)

diff --git a/blog/php-mysql/index.md b/blog/php-mysql/index.md
index 0975644..a53df2c 100644
--- a/blog/php-mysql/index.md
+++ b/blog/php-mysql/index.md
@@ -26,7 +26,7 @@
 
 12. [数据类型-Set集合](blog/php-mysql/sql-set.md)
 
-[列属性（字段属性）](blog/php-mysql/sql-field-prototype.md)
+13. [列属性（字段属性）](blog/php-mysql/sql-field-prototype.md)
 
 [表关系](blog/php-mysql/sql-relation.md)
 
diff --git a/blog/webpack/index.md b/blog/webpack/index.md
index 21bf193..7d2f738 100644
--- a/blog/webpack/index.md
+++ b/blog/webpack/index.md
@@ -2553,4 +2553,148 @@ module.exports = {
 };
 ```
 
-https://www.bilibili.com/video/BV1e7411j7T5?p=29&spm_id_from=pageDriver
+### 6.11、外部扩展(Externals)
+
+从 CDN 引入 jQuery，而不是把它打包
+
+index.html
+```html
+<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
+```
+
+webpack.config.js
+
+```js
+module.exports = {
+  //...
+  externals: {
+    jquery: 'jQuery',
+  },
+};
+```
+
+index.js
+
+```js
+import $ from 'jquery';
+
+$('.my-element').animate(/* ... */);
+```
+
+### 6.12、dll
+
+1、将第三方库打包到dll文件
+
+```js
+// webpack.dll.config.js
+/**
+ * 使用dll技术，对某些库（第三方库：jQuery,vue, react...）进行单独打包
+ */
+
+const path = require("path");
+const webpack = require("webpack");
+
+// webpack配置
+module.exports = {
+  // 入口文件
+  entry: {
+    vendors: ["jquery"],
+  },
+
+  // 输出
+  output: {
+    filename: "[name].dll.js",
+    path: path.resolve(__dirname, "dll"),
+    // 打包库对外暴露的名字
+    library: "[name]_[fullhash:10]",
+    clean: true,
+  },
+
+  // 插件配置
+  plugins: [
+    // 提供映射表
+    new webpack.DllPlugin({
+      name: "[name]_[fullhash:10]",
+      path: path.resolve(__dirname, "[name].manifest.json"),
+    }),
+  ],
+
+  // 模式
+  mode: "production",
+};
+
+```
+
+```bash
+$ npx webpack --config webpack.dll.config.js
+```
+
+2、将dll文件引入到html中
+
+```bash
+$ npm i add-asset-html-webpack-plugin -D
+```
+
+add-asset-html-webpack-plugin: 添加js或css资源到html中
+[https://github.com/SimenB/add-asset-html-webpack-plugin](https://github.com/SimenB/add-asset-html-webpack-plugin)
+
+```js
+// webpack.config.js
+const path = require("path");
+const webpack = require("webpack");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
+
+// webpack配置
+module.exports = {
+  // 入口文件
+  entry: "./src/index.js",
+
+  // 输出
+  output: {
+    filename: "[name].[contenthash:10].js",
+    path: path.resolve(__dirname, "dist"),
+    publicPath: "/dist/",
+    // 在生成文件之前清空 output 目录
+    clean: true,
+  },
+
+  // 插件配置
+  plugins: [
+    // 复制一份HTML文件，并自动引入打包资源（js/css）
+    new HtmlWebpackPlugin({
+      template: "./src/index.html",
+    }),
+
+    // 告诉webpack 哪些库不参与打包
+    new webpack.DllReferencePlugin({
+      context: path.join(__dirname),
+      manifest: path.resolve(__dirname, "vendors.manifest.json"),
+    }),
+
+    // 将某个文件打包输出，并在HTML文件中引入
+    new AddAssetHtmlPlugin({
+      filepath: path.resolve(__dirname, "dll/vendors.dll.js"),
+    }),
+  ],
+
+  // 模式
+  // mode: "development",
+  mode: "production",
+};
+
+```
+
+src/index.js
+
+```js
+import $ from 'jquery';
+console.log($);
+```
+```bash
+$ npx webpack --config webpack.config.js
+```
+
+
+https://www.bilibili.com/video/BV1e7411j7T5?p=31&spm_id_from=pageDriver
+
-- 
GitLab