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

阅读时长 4 分钟读完

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

配置多个入口

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

自动生成对应的 HTML 页面

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

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

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

-- -------------------- ---- -------
----- ----------------- - -------------------------------

-------------- - -
  ------ -
    ------ -----------------
    ----- ---------------
  --
  -------- -
    --- -------------------
      --------- -------------------
      --------- -------------
      ------- ---------
    ---
    --- -------------------
      --------- ------------------
      --------- ------------
      ------- --------
    --
  -
-

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

总结

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

示例代码:

-- -------------------- ---- -------
----- ----------------- - -------------------------------

-------------- - -
  ------ -
    ------ -----------------
    ----- ---------------
  --
  -------- -
    --- -------------------
      --------- -------------------
      --------- -------------
      ------- ---------
    ---
    --- -------------------
      --------- ------------------
      --------- ------------
      ------- --------
    --
  -
-

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b6e04eadd4f0e0fff7e581

纠错
反馈