处理 HTML 资源

1.下载包

npm i html-webpack-plugin -D

2.配置

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESlintWebpackPlugin = require('eslint-webpack-plugin');

module.exports = {
    //入口
    entry: "./src/main.js",//相对路径
    //输出
    output: {
        //文件的输出路径
        //__dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, 'dist'),//相对路径
        //文件名
        filename: 'static/js/main.js',
        //自动清空上次打包的内容
        //原理：在打包前，将path整个目录内容清空，在进行打包。
        clean: true,
    },
    //加载器
    module: {
        rules: [
            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/,
                //loader 只能使用一个 loader
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader", // 将stylus编译成css文件
                ],
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: 'asset',
                parser: {
                    //小于10kb的图片转base64
                    //优点：减少请求数量 缺点：体积会更大
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 10kb
                    }
                },
                generator: {
                    //输出图片名称
                    //[hash:10] hash 取前10位
                    filename: "static/images/[hash:10][ext][query]"
                }
            },
            {
                test: /\.(ttf|woff2?|map3|ma4|avi)$/,
                type: 'asset/resource',
                generator: {
                    //输出名称
                    filename: "static/media/[hash:10][ext][query]"
                }
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,//排除node_modules代码不编译
                loader: 'babel-loader',
            }
        ],
    },

    //插件
    plugins: [
        //plugin的配置
        new ESlintWebpackPlugin({
            context: path.resolve(__dirname, 'src')
        }),
        new HtmlWebpackPlugin(
            {
                //模板：
                template: path.resolve(__dirname, 'public/index.html')
            }
        )
    ],
    //模式
    mode: 'development'
}

3.修改 index.html

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入

<!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>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
  </body>
</html>

4.运行指令

npx webpack

此时 dist 目录就会输出一个 index.html 文件