webpack7：处理html资源

前端小云儿

已于 2024-11-01 11:07:35 修改

阅读量150

点赞数

分类专栏： css基础-js基础硬核-知识体系文章标签： webpack

于 2021-09-28 22:49:12 首次发布

本文链接：https://blog.csdn.net/jieweiwujie/article/details/120539240

版权

css基础-js基础硬核-知识体系专栏收录该内容

49 篇文章 1 订阅

订阅专栏

npm i html-webpack-plugin -D

webpack.config.js

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

 plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],

原来index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>hello webpack</h3>
  <div class="div1">
   hello webpack
  </div>
  <div class="div2">
    hello webpack
   </div>
   <div class="div3">
    hello webpack
   </div>
   <div class="div4">
    hello webpack
   </div>
   <!-- 7这是手动引入,不要了 -->
  <!-- <script src="../dist/main.js"></script> -->
</body>
</html>