From 859a3121d2bf210d7ebd463b96fbf8bb6ce085b2 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Wed, 1 Jun 2022 23:07:49 +0800
Subject: [PATCH] fix

---
 blog/php-mysql/index.md        |   4 +-
 blog/php-mysql/sql-join.md     |   2 +-
 blog/webpack/webpack-loader.md | 178 ++++++++++++++++++++++++++++++++-
 package.json                   |   2 +-
 4 files changed, 181 insertions(+), 5 deletions(-)

diff --git a/blog/php-mysql/index.md b/blog/php-mysql/index.md
index 24623e9..7d704ec 100644
--- a/blog/php-mysql/index.md
+++ b/blog/php-mysql/index.md
@@ -40,9 +40,9 @@
 
 19. [查询中的运算符](blog/php-mysql/sql-operator.md)
 
-[联合查询 union](blog/php-mysql/sql-union.md)
+20. [联合查询 union](blog/php-mysql/sql-union.md)
 
-[连接查询 join](blog/php-mysql/sql-join.md)
+21. [连接查询 join](blog/php-mysql/sql-join.md)
 
 [子查询 sub query](blog/php-mysql/sql-subquery.md)
 
diff --git a/blog/php-mysql/sql-join.md b/blog/php-mysql/sql-join.md
index 10bea42..c17b989 100644
--- a/blog/php-mysql/sql-join.md
+++ b/blog/php-mysql/sql-join.md
@@ -1,4 +1,4 @@
-# 连接查询
+# 连接查询 join
 
 将多张表连到一起查询 导致记录行数和字段列发生变化
 
diff --git a/blog/webpack/webpack-loader.md b/blog/webpack/webpack-loader.md
index b650238..6cf3d0e 100644
--- a/blog/webpack/webpack-loader.md
+++ b/blog/webpack/webpack-loader.md
@@ -447,5 +447,181 @@ module.exports = {
 ```
 
 
+### file-loader
 
-https://www.bilibili.com/video/BV14T4y1z7sw?p=74&spm_id_from=pageDriver
+使用webpack提供的loader工具
+
+```
+$ pnpm i -D loader-utils
+```
+
+```js
+// file-loader.js
+
+// https://github.com/webpack/loader-utils
+const loaderUtils = require("loader-utils");
+
+module.exports = function (content) {
+
+  // 1、根据文件内容生成带hash的文件名
+  const interpolatedName = loaderUtils.interpolateName(
+    this,
+    "[hash].[ext][query]",
+    { content }
+  );
+
+  // 2、将文件输出
+  this.emitFile(interpolatedName, content)
+
+  // 3、返回文件名
+  return `module.exports = "${interpolatedName}"`;
+};
+
+// raw loader 处理图片资源，content输入为Buffer类型
+module.exports.raw = true;
+```
+
+
+使用
+
+```js
+// src/index.js
+
+import './style.css';
+
+```
+
+```css
+/* style.css */
+.box {
+  width: 200px;
+  height: 200px;
+  /* css 文件中使用图片资源 */
+  background-image: url("./girl.png");
+}
+
+```
+
+```js
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      // 处理图片资源
+      {
+        test: /\.(png|jpe?g|gif)$/,
+        loader: "./loaders/file-loader/index.js",
+        // 不使用 asset 模块处理，避免生成重复资源
+        type: 'javascript/auto'
+      },
+      // 处理css资源
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader',
+        ]
+      },
+    ],
+  },
+};
+
+```
+
+css代码替换如下
+```css
+.box {
+    width: 200px;
+    height: 200px;
+    background-image: url(/39e33252eac24cf9.png);
+}
+```
+
+### style-loader
+
+在file-loader 的基础上继续
+
+定义loader, 将css插入到body中
+
+```js
+// style-loader.js
+
+module.exports = function () {};
+
+module.exports.pitch = function (remainingRequest) {
+  // remainingRequest 剩余的还要处理的loader
+
+  //   console.log(remainingRequest);
+  //   _modules/css-loader/dist/cjs.js!/root/webpack-loader/src/style.css
+
+  // 将绝对路径转换为相对路径
+  const relativePath = remainingRequest
+    .split("!")
+    .map((absolutePath) => {
+      return this.utils.contextify(this.context, absolutePath);
+    })
+    .join("!");
+
+  console.log(relativePath);
+
+  // 引入css-loader处理后的资源
+  // 创建style标签，将内容插入到页面中
+  const script = `
+        import style from '!!${relativePath}';
+
+        const styleElement = document.createElement('style');
+        styleElement.innerHTML = style;
+        document.head.appendChild(styleElement); 
+    `;
+
+  // 终止后面的loader执行
+  return script;
+};
+
+```
+
+使用
+
+```js
+// webpack.config.js
+const path = require("path");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: "./src/index.js",
+
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "bundle.js",
+    clean: true,
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.(png|jpe?g|gif)$/,
+        loader: "./loaders/file-loader/index.js",
+        // 不使用 asset 模块处理，避免生成重复资源
+        type: 'javascript/auto'
+      },
+      {
+        test: /\.css$/,
+        use: [
+          './loaders/style-loader/index.js',
+          'css-loader',
+        ]
+      },
+    ],
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+  ],
+
+  mode: "development",
+};
+
+```
+https://www.bilibili.com/video/BV14T4y1z7sw?p=77&spm_id_from=pageDriver
\ No newline at end of file
diff --git a/package.json b/package.json
index f6e4dd9..28e4520 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "~/.nvm/versions/node/v12.22.6/bin/docsify serve --open ./",
     "live": "live-server",
-    "start": "http-server -o /"
+    "start": "http-server -o / -c-1"
   },
   "repository": {
     "type": "git",
-- 
GitLab