【笔记】Webpack的HtmlWebpackPlugin插件

发表于 更新于 阅读次数：

前言

Webpack通过HtmlWebpackPlugin插件，实现生成HTML文件
自动向HTML文件中通过<script></script>标签引入JS文件
配合mini-css-extract-plugin可以自动向HTML文件中通过<link>标签引入CSS文件

下载依赖

1
npm install -D html-webpack-plugin

修改配置文件

webpack.config.js
1
2
3
4
5
6
7
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

title：指定站点标题
template：指定EJS模板
filename：指定输出的文件
inject：指定引入JS文件的位置

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "站点标题",
      template: "./src/index.html",
      filename: "index.html",
      inject: "body",
    })
  ]
}

完成