多入口配置自动生成 html 页面（基于 Webpack4.0）

在前端开发中，我们经常需要配置多个入口，而每个入口都需要自动生成对应的 HTML 页面。Webpack4.0 提供了一种非常简单且灵活的方式来完成这个任务。

配置多个入口

首先，我们需要在 webpack.config.js 中配置多个入口。比如我们有两个入口：index.js 和 demo.js。

module.exports = {
  entry: {
    index: './src/index.js',
    demo: './src/demo.js'
  }
}

自动生成对应的 HTML 页面

要自动生成对应的 HTML 页面，我们需要使用 html-webpack-plugin 插件。这个插件可以根据指定的模板生成 HTML 页面，并且将打包后的 JS 文件插入到 HTML 页面中。

首先，我们需要安装 html-webpack-plugin。

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

然后在 webpack.config.js 中引入并配置 html-webpack-plugin 插件。使用 new HtmlWebpackPlugin() 构造函数，我们可以实现自动生成对应的 HTML 页面。下面是一个示例代码：

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

module.exports = {
  entry: {
    index: './src/index.js',
    demo: './src/demo.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      template: './src/demo.html',
      filename: 'demo.html',
      chunks: ['demo']
    })
  ]
}

这里我们使用了两个 HtmlWebpackPlugin 实例，分别对应 index.js 和 demo.js 对应的 HTML 页面。设置了 template 属性指定了模板文件，filename 属性指定了生成的 HTML 文件名，chunks 属性指定该 HTML 文件需要引入哪些打包后的 JS 文件。

总结

在 Webpack4.0 中，配置多个入口自动生成对应的 HTML 页面十分容易。我们只需要使用 html-webpack-plugin 插件，并编写配置，即可自动生成 HTML 页面。

示例代码：

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

module.exports = {
  entry: {
    index: './src/index.js',
    demo: './src/demo.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      template: './src/demo.html',
      filename: 'demo.html',
      chunks: ['demo']
    })
  ]
}

以上是一个实用的技巧，可以使你在前端开发时更加高效和方便。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b6e04eadd4f0e0fff7e581