HtmlWebpackPlugin

HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建,以便为您的 webpack bundle 提供服务。这对于被更改文件的文件名中包含每次编译哈希(hash) 的webpack bundle尤其有用。您可以让插件为您生成一个HTML文件,使用lodash templates提供您自己的模板,或使用自己的加载器(loader)

安装

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

基本用法

这个插件将为您生成一个HTML5文件,该文件的 body 中使用script 标记引用了所有 webpack bundle。只需如下添加插件到您的webpack配置中:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: '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标记引用。

如果你有任何CSS资源在webpack的 output 中,(例如,使用 ExtractTextPlugin提取的CSS)那么这些资源将被包含在HTML head 中,使用<link>标记引用。

配置

有关所有配置选项,请参阅插件文档

第三方插件

该插件支持插件。 有关插件列表,请参阅文档

results matching ""

    No results matching ""