Webpack 插件之 html-webpack-plugin 入门-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 已经成为了必不可少的工具。它可以帮助我们将多个 JavaScript 模块打包成一个文件，同时还可以处理 CSS、图片等资源文件。而 html-webpack-plugin 则是 Webpack 中非常重要的一个插件，它可以帮助我们自动生成 HTML 文件，并且自动引入打包后的 JavaScript 和 CSS 文件。

安装

我们可以通过 npm 安装 html-webpack-plugin 插件：

npm install --save-dev html-webpack-plugin

配置

在 Webpack 配置文件中，我们需要引入 html-webpack-plugin，并在 plugins 中添加该插件的实例。

// www.javascriptcn.com code example
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 出口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html'
    })
  ]
};

上面的配置中，我们首先引入了 html-webpack-plugin。然后在 plugins 中添加了一个新的实例，该实例接收了一个对象作为参数。其中，title 表示生成的 HTML 文件的标题，而 template 则表示 HTML 文件的模板文件。

参数

html-webpack-plugin 还有许多其他的参数，可以帮助我们更加灵活地生成 HTML 文件。下面我们来介绍一些常用的参数：

filename

该参数表示生成的 HTML 文件的文件名，默认为 index.html。

plugins: [
  new HtmlWebpackPlugin({
    filename: 'my-custom-name.html'
  })
]

template

该参数表示 HTML 文件的模板文件。可以是一个 HTML 文件，也可以是一个模板文件。

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]

inject

该参数表示自动注入生成的 JavaScript 和 CSS 文件的位置。默认为 true，表示注入到 body 标签底部。

plugins: [
  new HtmlWebpackPlugin({
    inject: 'head'
  })
]

minify

该参数表示是否压缩生成的 HTML 文件。默认为 false。

plugins: [
  new HtmlWebpackPlugin({
    minify: true
  })
]

chunks

该参数表示需要引入的 JavaScript 文件。可以是一个数组，也可以是一个字符串。

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['app']
  })
]

excludeChunks

该参数表示不需要引入的 JavaScript 文件。可以是一个数组，也可以是一个字符串。

plugins: [
  new HtmlWebpackPlugin({
    excludeChunks: ['login']
  })
]

示例代码

下面是一个简单的示例代码，用于演示 html-webpack-plugin 的使用：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      template: './src/index.html',
      filename: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
  ]
};

在上面的代码中，我们首先引入了 path 和 html-webpack-plugin 两个模块。然后配置了入口文件和出口文件。最后在 plugins 中添加了一个 html-webpack-plugin 的实例，并配置了一些参数。

结语

html-webpack-plugin 是 Webpack 中非常重要的一个插件，它可以帮助我们自动生成 HTML 文件，并且自动引入打包后的 JavaScript 和 CSS 文件。在实际开发中，我们可以根据自己的需要，灵活地配置 html-webpack-plugin 的参数，以达到最佳的效果。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d16bd8a941bf7134307954

Webpack 插件之 html-webpack-plugin 入门

安装

配置

参数