03 【资源处理】

03 【资源处理】
6.资源处理

在上一章，我们讲解了四种资源模块引入外部资源。除了资源模块，我们还可以通过 loader引入其他类型的文件。

什么是loader

webpack 只能理解 JavaScript 和JSON文件，这是 webpack 开箱可用的自带能力。 loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

在 webpack 的配置中，loader 有两个属性：
1. test 属性，识别出哪些文件会被转换。
2. use 属性，定义出在进行转换时，应该使用哪个 loader。
6.1 HTML资源

在index.html中是采用手动修改路径，然后才引入的，这样并不方便。我们想要实现的是webpack打包完成后自动帮助我们引入相关的资源。
于是就可以使用社区插件中的HtmlWebpackPlugin插件。

自动引入资源

1、下载 html-webpack-plugin 插件
```
pnpm i html-webpack-plugin - D
1
```
2、在 webpack.config.js 文件中引入插件并调用

使用，当直接new HtmlWebpackPlugin(）的时候，会在dist文件夹下生成一个index.html，但是它只有一些基础的配置。如果想要自行配置，则需要一个自己给定的模板index.html,然后增加一些配置，配置的参考文档：https://github.com/jantimon/html-webpack-plugin#options

该插件将为你生成一个 HTML5 文件，在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。只需添加该插件到你的 webpack 配置中
- 不传参的情况：new HTMLWebpackPlugin()：会在配置的output文件夹创建一个空的html, 自动引入打包输出的所有资源，包括js, css…；
- 设置参数template：复制设置的'./src/index.html'文件到配置的output文件夹，并自动引入打包输出的所有资源。
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  /* 
    html-webpack-plugin 没有任何配置会生成一个自动引入js文件的index.html
  */
  plugins: [
    new HtmlWebpackPlugin({
      // 可以用于html模板的title标签内容
      title: 'dselegent',
      template: './index.html', // 打包生成的文件的模板
      filename: 'app.html', // 打包生成的文件名称。默认为index.html
      // 设置所有资源文件注入模板的位置。可以设置的值
      // true|'head'|'body'|false，默认值为 true
      inject: 'body',
      
        压缩html代码 production环境使用
        minify: {
            // 移除空格
            collapseWhitespace: true,
            // 移除注释
            removeComment: true
        }
    }),
  ],
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
```
模板index.html
```
DOCTYPE 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><%= htmlWebpackPlugin.options.title %>title>
  head>
  <body>body>
html>
1
2
3
4
5
6
7
8
9
10
```
如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的

6.资源处理

6.1 HTML资源