处理 `Html` 资源(`HtmlWebpackPlugin`)

现阶段的每一次打包成功过后，我们都是手动引入的打包生成的js资源,但问题是,将来我们打包输出的js资源的名字是不固定的(即不一定叫main.js)并且后续我们打包生成的js资源也许是多个js文件甚至是多个css文件,因此我们不可能在index.html中一个一个的引入,这样太麻烦了并且不同的资源之间还可能存在不同的依赖关系,引错了还可能会报错,因此我们就需要自动引入打包好的资源,这是最方便的
webpack官方文档
这个插件将为你生成一个 HTML5 文件(路径:dist/index.html)，在 body 中使用 script 标签引入你所有 webpack(打包) 生成的资源,如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的 <script> 标签内引入。如果在 webpack 的输出中有任何 CSS 资源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入。

使用方法:

安装包

npm i html-webpack-plugin -D

配置webpack.config.js

// 使用的是commonjs 的语法格式[node.js]
const path = require("path");//node.js中的核心模块,专门用于处理路径问题
// 引入eslint
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
// 引入HtmlWebpackPlugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    // 入口
    // 相对路径和绝对路径都行
    entry:"./src/main.js",//相对路径
    // 输出
    output:{
        // 所有文件的输出目录,必须是绝对路径
        // path.resolve()方法返回一个绝对路径
        // __dirname为node.js中的变量,代表当前文件的文件夹名(就是这个文件夹的webpack_code)
        path: path.resolve(__dirname , "dist"),//绝对路径
        // js文件(入口文件)输出的文件名(打包后在输出路径当中生成的文件夹名)
        filename:"static/js/main.js",//所以我们这里改成js资源就输出到一个js文件夹当中
        clean: true,//(自动清空上次打包内容) 原理:在打包前,将path整个目录内容清空,在进行打包
    },
    // 加载器
    module:{
        rules:[
            // loder的配置
            // 1.处理css资源
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [
                    "style-loader", //将js中css通过创建style标签添加html文件当中生效
                    "css-loader"//将css资源编译成common.js的模块到js当中
                ],
            },
            // 2.处理less资源
            {
                test: /\.less$/,
                // loader:xxx => 自能使用一个loader
                use: [
                    "style-loader", 
                    "css-loader", 
                    "less-loader"//将less编译成css文件
                ], // use能够使用多个loader
            },
            // 3.处理图片资源
            {
                test: /\.(png|jpe?g|gif|webp)$/,//正则判断图片后缀
                type: "asset",
                parser:{
                    dataUrlCondition:{
                        // 将小于10kb的图片转化为base64
                        // 优点:减小请求数量  缺点:原图片的体积会变大(故大体积突变不会使用这种方法)
                        maxSize: 10*1024//10kb(大体积图片不会使用这种方法)
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: 'static/imgs/[hash:8][ext][query]'
                }
            },
            // 4.处理字体资源
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",//这里的是改成"asset/resource"
                generator: {
                  filename: "static/media/[hash:8][ext][query]",
                },
            },
            // 配置babel**********************************************************
            {
                test: /\.js$/,//检查匹配以js结尾的文件
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
            // *******************************************************************
        ],
    },
    // 插件
    plugins:[
        // plugin的配置

        // eslint配置
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录(src目录下的所有文件的语法)
            context: path.resolve(__dirname, "src"),
          }),

        // HtmlWebpackPlugin配置*******************************************************
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "public/index.html"),
          }),
        //   ****************************************************************************
    ],
    // 模式
    mode:"development"//开发模式
};

修改 src中的 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>webpack</title>
</head>
<body>
    <h1>Hello webpack!!</h1>
    <!-- css样式 -->
    <div class="box1"></div>
    <!-- less样式 -->
    <div class="box2">
        <div class="box3"></div>
    </div>

    <!-- 使用字体图标 -->
    <i class="iconfont icon-aixin"></i>
    <i class="iconfont icon-bianji"></i>
    <i class="iconfont icon-Dyanjing"></i>
    <i class="iconfont icon-caidan"></i>

    <!-- 手动引入(麻烦且存在不同资源之间的依赖问题) -->
    <!-- <script src="../dist/static/js/main.js"></script> -->

    <!-- 自动引入(通过插件实现:HtmlWebpackPlugin) -->
</body>
</html>

重新打包

npx webpack

webpack学习笔记(7)-处理html资源

处理 `Html` 资源(`HtmlWebpackPlugin`)

使用方法:

结果展示:

处理 Html 资源(HtmlWebpackPlugin)

使用方法:

结果展示:

处理 `Html` 资源(`HtmlWebpackPlugin`)