【Webpack--009】处理HTML资源

Sam9029

于 2024-09-18 22:24:36 发布

阅读量403

点赞数 4

分类专栏： Webpack 文章标签： webpack html 前端

本文链接：https://blog.csdn.net/m0_61486963/article/details/142345407

版权

Webpack 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问作者个人博客网站：sam9029.asia—Webpack入门笔记

处理 html 资源

webpack 需要引入 html-webpack-plugin 来处理 html 资源

官方网站 https://www.webpackjs.com/plugins/html-minimizer-webpack-plugin/

1. 下载包

npm i html-webpack-plugin -D

配置

webpack.config.js

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      // ... 其他配置
    ],
  },
  plugins: [
    // ... 其他配置
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js、css等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};

修改 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>