fix

23bdebca · 彭世瑜 · 9652909d · 23bdebca · 23bdebca · 23bdebca
隐藏空白更改
内联并排

Showing with 432 addition and 2 deletion

blog/webpack/index.md blog/webpack/index.md +429 -1

index.html index.html +2 -1

static/js/prism-less.min.js static/js/prism-less.min.js +1 -0

未找到文件。
--- a/blog/webpack/index.md
+++ b/blog/webpack/index.md
@@ -455,7 +455,435 @@ module.exports = {
 $ npx webpack
 ```
+### 3.7、打包Html资源
+- loader: 1. 下载； 2.使用（配置loader）
+- plugins: 1. 下载； 2.引入；3.使用
-https://www.bilibili.com/video/BV1e7411j7T5?p=6&spm_id_from=pageDriver
+```
\ No newline at end of file
+cnpm i html-webpack-plugin -D
+```
+默认创建一个空的HTML文件，自动引入打包输出的所有资源（js/css）
+默认输出的HTML
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Webpack App</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1"><script defer src="bundle.js"></script></head>
+  <body>
+  </body>
+</html>
+```
+自定义HTML
+```js
+// webpack.config.js
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// webpack配置
+module.exports = {
+  // 入口文件
+  entry: './src/index.js',
+  // 输出
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  // loader配置
+  module: {},
+  // 插件配置
+  plugins: [
+    // 复制一份HTML文件，并自动引入打包资源（js/css）
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+  ],
+  // 模式
+  mode: 'development',
+  // mode: 'production',
+};
+```
+src/index.html
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Webpack</title>
+</head>
+<body>
+</body>
+</html>
+```
+执行打包命令之后输出
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Webpack</title>
+<script defer src="bundle.js"></script></head>
+<body>
+</body>
+</html>
+```
+### 3.8、打包图片资源
+安装依赖
+```
+cnpm i html-loader -D
+```
+项目结构
+```bash
+$ tree -I node_modules
+.
+├── package.json
+├── src
+│   ├── index.html
+│   ├── index.js
+│   ├── index.less
+│   └── weibo.png
+└── webpack.config.js
+```
+src/index.js
+```js
+// 引入less样式资源
+import './index.less';
+// js引入图片资源
+import weibo from './weibo.png';
+console.log(weibo);
+// http://127.0.0.1:5500/dist/images/7f1a8e356f.png
+```
+src/index.less
+```less
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  // background-color: pink;
+}
+.box {
+  width: 100px;
+  height: 100px;
+  // css引入图片资源
+  background-image: url('./weibo.png');
+  // 替换为：background-image: url(/dist/images/7f1a8e356f.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+```
+src/index.html
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible"
+          content="IE=edge">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title>Webpack</title>
+</head>
+<body>
+    <div class="box"></div>
+    <!-- html引入图片资源 -->
+    <img src="./weibo.png" alt="">
+    <!-- 替换为：<img src="images/7f1a8e356f.png" alt=""> -->
+</body>
+</html>
+```
+配置文件 webpack.config.js
+webpack5默认会处理图片资源，webpack4需要单独配置
+|webpack5 | webpack4 | 说明
+|-|-|-
+asset/resource | file-loader | 发送一个单独的文件并导出 URL
+asset/inline | url-loader | 导出一个资源的 data URI
+asset/source | raw-loader | 导出资源的源代码
+asset |  url-loader | 在导出一个 data URI 和发送一个单独的文件之间自动选择。
+webpack4 配置
+```js
+{
+    module: {
+        rules: [
+            // 默认无法处理HTML中的图片
+            {
+                test: /\.(png|svg|jpg|jpeg|gif)$/i,
+                // 使用一个loader，如果使用多个loader用use
+                loader: 'url-loader',
+                options: {
+                    // 图片大小小于8kb，就会被base64编码
+                    // 优点：减少请求数量，减轻服务器压力
+                    // 缺点：js体积会更大, 文件请求速度更慢
+                    limit: 8 * 1024,
+                    // 问题：url-loader默认使用es6模块解析，而html-loader引入图片是commonjs
+                    // 解析时会出现[object Module]
+                    // 解决：关闭url-loader的es6模块化，使用commonjs解析
+                    esModule: false,
+                    // 自定义命名 取hash前10位
+                    name: '[hash:10].[ext]'
+                }
+            },
+            // 处理html中的图片, 引入img，让后续loader解析
+            {
+                test: /\.html$/i,
+                loader: 'html-loader',
+            },
+        ]
+    }
+}
+```
+package.json
+```json
+{
+  "devDependencies": {
+    "css-loader": "^6.7.1",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
+  }
+}
+```
+webpack5配置
+```js
+// webpack.config.js
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// webpack配置
+module.exports = {
+  // 入口文件
+  entry: './src/index.js',
+  // 输出
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    // 自定义资源文件名
+    assetModuleFilename: 'images/[hash:10][ext][query]',
+  },
+  // loader配置
+  module: {
+    rules: [
+      // 处理less文件
+      {
+        test: /\.less$/i,
+        use: ['style-loader', 'css-loader', 'less-loader'],
+      },
+      // 处理资源文件
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        // 默认: 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
+        type: 'asset',
+      },
+      // 处理html中的图片
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+      },
+    ],
+  },
+  // 插件配置
+  plugins: [
+    // 复制一份HTML文件，并自动引入打包资源（js/css）
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+  ],
+  // 模式
+  mode: 'development',
+  // mode: 'production',
+};
+```
+### 3.9、打包字体资源
+可以从iconfont（[https://www.iconfont.cn/](https://www.iconfont.cn/)）网站下载字体文件
+打包后的项目结构
+```
+$ tree -I node_modules
+.
+├── dist
+│   ├── bundle.js
+│   ├── images
+│   │   ├── 5b0edd384b.ttf
+│   │   ├── 969b5fedf8.woff
+│   │   └── d79bd05095.woff2
+│   └── index.html
+├── package.json
+├── src
+│   ├── iconfont
+│   │   ├── iconfont.css
+│   │   ├── iconfont.js
+│   │   ├── iconfont.json
+│   │   ├── iconfont.ttf
+│   │   ├── iconfont.woff
+│   │   └── iconfont.woff2
+│   ├── index.html
+│   ├── index.js
+└── webpack.config.js
+```
+src/index.js
+```js
+// 引入css样式资源
+import './iconfont/iconfont.css';
+```
+src/index.html
+```html
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible"
+          content="IE=edge">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0">
+    <title>Webpack</title>
+</head>
+<body>
+    <span class="iconfont icon-home"></span>   
+</body>
+</html>
+```
+webpack.config.js
+webpack4
+```js
+{
+    // 排除资源
+    exclude: /\.(js|less|html)$/i,
+    type: 'file-loader',
+    options: {
+        // 自定义命名 取hash前10位
+        name: '[hash:10].[ext]'
+    }
+},
+```
+webpack5
+```js
+// webpack.config.js
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+// webpack配置
+module.exports = {
+  // 入口文件
+  entry: './src/index.js',
+  // 输出
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    // 自定义资源文件名
+    assetModuleFilename: 'images/[hash:10][ext][query]',
+  },
+  // loader配置
+  module: {
+    rules: [
+      // 处理css文件
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      // 处理less文件
+      {
+        test: /\.less$/i,
+        use: ['style-loader', 'css-loader', 'less-loader'],
+      },
+      // 处理资源文件
+      {
+        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        type: 'asset',
+      },
+      // 处理html文件，加载其中的图片
+      {
+        test: /\.html$/i,
+        loader: 'html-loader',
+      },
+      // 处理字体文件
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: 'asset/resource',
+      },
+    ],
+  },
+  // 插件配置
+  plugins: [
+    // 复制一份HTML文件，并自动引入打包资源（js/css）
+    new HtmlWebpackPlugin({
+      template: './src/index.html',
+    }),
+  ],
+  // 模式
+  mode: 'development',
+  // mode: 'production',
+};
+```
+https://www.bilibili.com/video/BV1e7411j7T5?p=9&spm_id_from=pageDriver
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -117,6 +117,7 @@
    <script src="static/js/prism-php.min.js"></script>
    <script src="static/js/prism-sql.min.js"></script>
    <script src="static/js/prism-python.min.js"></script>
+    <script src="static/js/prism-less.min.js"></script>
    <script src="static/js/prism-json@1.26.0.min.js"></script>
    <script src="static/js/search@4.12.2.min.js"></script>
@@ -124,7 +125,7 @@
    <script src="static/js/time-updater@1.min.js"></script>
    <!-- 下载地址 -->
-    <!-- https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js-->
+    <!-- https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js -->
    <link rel="stylesheet"
          href="static/js/toc.css">

--- a/static/js/prism-less.min.js
+++ b/static/js/prism-less.min.js
+Prism.languages.less=Prism.languages.extend("css",{comment:[/\/\*[\w\W]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-]+?(?:\([^{}]+\)|[^(){};])*?(?=\s*\{)/i,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\([^{}]*\)|[^{};@])*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(\b|\B)(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/i,punctuation:/[{}();:,]/,operator:/[+\-*\/]/}),Prism.languages.insertBefore("less","punctuation",{"function":Prism.languages.less.function}),Prism.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-]+.*?(?=[(;])/,lookbehind:!0,alias:"function"}});