Skip to content

C
Coding Tree

檀越@新空间 / Coding Tree

通知 2
Star 0
Fork 0
C
Coding Tree
提交 23bdebca 编写于 作者: 彭世瑜's avatar 彭世瑜
浏览文件
操作

fix

上级 9652909d
显示空白变更内容
内联 并排
Showing with 432 addition and 2 deletion
blog/webpack/index.md
浏览文件 @ 23bdebca
......@@ -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
index.html
浏览文件 @ 23bdebca
......@@ -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">
......
static/js/prism-less.min.js 0 → 100644
浏览文件 @ 23bdebca
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"}});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或