npm 包 html-webpack-plugin-for-multihtml 使用教程

阅读时长 10 分钟读完

在前端开发中,webpack 是一个非常流行的构建工具,它可以将多个文件打包成一个 bundle.js 文件,以达到优化网页性能的目的。然而,当我们需要生成多个 HTML 页面的时候,webpack 默认只会生成一个 index.html 文件,并且这个文件只会包含一个 script 标签引入该页面的 JavaScript 文件,在这种情况下,我们需要使用 html-webpack-plugin-for-multihtml 这个 npm 包来帮助我们更好地生成多个 HTML 页面。

安装

html-webpack-plugin-for-multihtml 可以通过 npm 进行安装,只需要在终端中输入以下命令即可:

使用

简单使用

在 webpack 的配置文件中,我们需要先引入 html-webpack-plugin-for-multihtml 这个包,然后在 plugins 数组中使用该插件,例如:

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

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

其中,entry 选项是指定打包的入口文件,output 选项是指定输出的目录和文件名,plugins 选项是指定生成 HTML 文件的配置项。HtmlWebpackPlugin 对象包含以下属性:

  • template: 指定 HTML 模板文件的路径。
  • filename: 指定生成的 HTML 文件名。
  • chunks: 指定需要引用的 JavaScript 文件。

使用模板引擎

在上面的例子中,我们是通过指定 template 属性来指定 HTML 模板文件的路径的。而如果我们需要在 HTML 页面中插入动态内容,这时候就可以使用模板引擎来实现。html-webpack-plugin-for-multihtml 支持常见的模板引擎,例如 Handlebars、EJS、Pug 等等。

以 Handlebars 为例,我们需要在 webpack 配置文件中先安装 handlebars 这个包:

接着,我们需要在 HTML 模板文件中使用 Handlebars 语法书写,在 webpack 配置文件中配置 Handlebars:

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

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

在以上例子中,我们首先引入了 handlebars 模块,并将其赋值给一个常量,然后在每个 HtmlWebpackPlugin 对象中指定模板引擎为 handlebars。在模板文件中,我们可以使用 {{}} 来渲染动态内容,在 HtmlWebpackPlugin 对象中的 templateParameters 属性中指定需要传递的参数。

使用 ExtractTextWebpackPlugin 提取 CSS

在前面的例子中,我们已经使用 html-webpack-plugin-for-multihtml 来生成多个 HTML 页面了,但是我们还没有处理 CSS 样式。一般情况下,我们会使用 ExtractTextWebpackPlugin 来提取 CSS 样式,然后分离出一个单独的 CSS 文件。

首先在 webpack 配置文件中安装 ExtractTextWebpackPlugin 插件:

然后,修改 webpack 配置文件:

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

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

在以上代码中,我们首先引入了 ExtractTextWebpackPlugin 插件,并在 plugins 数组中添加了新的插件。然后,我们在 module.rules 中添加了一条新规则,使用 ExtractTextWebpackPlugin.extract() 方法来提取 CSS 样式文件,该方法接受一个对象作为参数,该对象包含两个属性:fallbackuse,其中 fallback 属性表示从 JS 中提取 CSS 样式失败后的处理方式,use 属性表示在 JS 中提取到 CSS 样式后使用的 loader。

总结

html-webpack-plugin-for-multihtml 可以帮助我们在 webpack 打包时生成多个 HTML 文件,并且可以和常见的模板引擎和 ExtractTextWebpackPlugin 插件进行配合使用。学会使用该 npm 包对于前端开发工程师来说是非常重要的。

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

纠错
反馈