From 23bdebcaec8a69fadf99c6321357c72b61089ad7 Mon Sep 17 00:00:00 2001
From: pengshiyu <1940607002@qq.com>
Date: Thu, 19 May 2022 15:35:13 +0800
Subject: [PATCH] fix
---
blog/webpack/index.md | 430 +++++++++++++++++++++++++++++++++++-
index.html | 3 +-
static/js/prism-less.min.js | 1 +
3 files changed, 432 insertions(+), 2 deletions(-)
create mode 100644 static/js/prism-less.min.js
diff --git a/blog/webpack/index.md b/blog/webpack/index.md
index 08e4ad9..95d7043 100644
--- 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
+
+
+
+
+ Webpack App
+
+
+
+
+```
+
+自定义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
+
+
+
+
+
+ Webpack
+
+
+
+
+
+```
+
+执行打包命令之后输出
+
+```html
+
+
+
+
+
+ Webpack
+
+
+
+
+
+```
+
+### 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
+
+
+
+
+
+
+ Webpack
+
+
+
+
+
+
+ 
+
+
+
+
+```
+
+
+配置文件 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
+
+
+
+
+
+
+ Webpack
+
+
+
+
+
+
+
+```
+
+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
diff --git a/index.html b/index.html
index fa5825b..b753dd2 100644
--- a/index.html
+++ b/index.html
@@ -117,6 +117,7 @@
+
@@ -124,7 +125,7 @@
-
+
diff --git a/static/js/prism-less.min.js b/static/js/prism-less.min.js
new file mode 100644
index 0000000..5f826d6
--- /dev/null
+++ b/static/js/prism-less.min.js
@@ -0,0 +1 @@
+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"}});
--
GitLab