webpack快速入门-处理html资源

最新推荐文章于 2024-03-29 22:41:53 发布

温情key

最新推荐文章于 2024-03-29 22:41:53 发布

阅读量204

点赞数

分类专栏： webpack快速入门文章标签： webpack html 前端

本文链接：https://blog.csdn.net/qq_48960335/article/details/126680009

版权

webpack快速入门专栏收录该内容

10 篇文章 1 订阅

订阅专栏

本文介绍了如何使用html-webpack-plugin自动创建dist目录中的index.html，并引入相关js文件。通过配置webpack，实现源码输出目录的自动化，包括LESS和SCSS的支持。

摘要由CSDN通过智能技术生成

dist 目录属于构建目录，是我们源码的输出目录，我们希望里面的一切都是可以自动化的，包括 index.html 文件也能自动创建，js 文件也能自动引入到页面

所以我们需要用到插件 html-webpack-plugin

下载依赖

npm install html-webpack-plugin -D

添加模板文件

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>Document</title>
    <style>
        #app {
            display: flex;
        }
    </style>
</head>

<body>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div id="app">
        <div class="box2">less</div>
        <div class="box3">sacc/scss</div>
        <div class="box4"></div>
        <div class="box5"></div>
    </div>
    
</body>

</html>

配置

// Node.js的核心模块，用于处理文件路径
const path = require('path');
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 模式 
    mode: 'development',
    // 入口 告诉webpack从哪个文件开始进行打包  path.resolve()方法返回一个绝对路径  __dirname 当前文件的文件夹绝对路径
    entry: path.resolve(__dirname, 'src', 'index.js'),
    // 出口 webpack 输出结果的相关配置
    output: {
        path: path.resolve(__dirname, 'dist'), // 所有输出文件的目标路径  必须是绝对路径（使用 Node.js 的 path 模块）
        filename: 'bundle.js', // 输出文件的文件名
        clean: true, // 自动将上次打包目录资源清空
    },
    // 模块  处理项目中各种不同类型的模块
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset", // 相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"]  // 预设: babel一系列插件的集合
                    }
                }
            }
        ]
    },
    // 插件配置列表 webpack各种扩展功能 
    plugins: [
        new htmlWebpackPlugin({
            filename: 'index.html',  // 输出文件的名称
            // 打包后产出的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, 'src/index.html'),  // 模板文件的路径
            title: 'webpack-index'  // 生成页面的标题
        })
    ],
}