webpack打包2之配置自动生成html ——html-webpack-plugin插件

孟孟_mengmeng

于 2021-09-02 17:12:31 发布

阅读量274

点赞数

分类专栏： webpack 文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/qq_40922656/article/details/120062942

版权

webpack 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何通过html-webpack-plugin插件避免手动引入打包资源时的繁琐操作，减少因配置变更导致的index.html同步问题，提供了一步到位的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章中实现隔行变色，在index.html中手动引入打包后资源，是有缺点的（比如：webpack配置中输出的打包文件名称修改了，需要及时去index.html中同步修改）
避免以上情况，我们可以使用html-webpack-plugin插件
1、下载安装

yarn add html-webpack-plugin -D 
-D 将依赖记录成开发依赖，只在开发阶段用，实际上线不需要的

2、引入，在webpack.config.js文件中，引入这个插件

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入

3、配置说明

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};