HtmlWebpackPlugin

2023-05-22 10:01 更新

?HtmlWebpackPlugin? 簡化了 HTML 文件的創(chuàng)建，以便為你的 webpack 包提供服務。這對于那些文件名中包含哈希值，并且哈希值會隨著每次編譯而改變的 webpack 包特別有用。你可以讓該插件為你生成一個 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

安裝

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

基本用法

該插件將為你生成一個 HTML5 文件， 在 body 中使用 script 標簽引入你所有 webpack 生成的 bundle。 只需添加該插件到你的 webpack 配置中，如下所示：

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

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};

這將會生成一個包含以下內容的 ?dist/index.html? 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果你有多個 webpack 入口，他們都會在已生成 HTML 文件中的 ?<script>? 標簽內引入。

如果在 webpack 的輸出中有任何 CSS 資源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么這些資源也會在 HTML 文件 <head> 元素中的 <link> 標簽內引入。

配置

獲取所有的配置選項，請瀏覽插件文檔。

第三方插件

該插件支持第三方插件。詳細列表參閱文檔。


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號