首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建,以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件,使用lodash模板提供你自己的模板,或使用你自己的loader

安装

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

基本用法

该插件将为你生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。 只需添加插件到你的 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 assets 在webpack的输出中(例如, 利用ExtractTextPlugin提取CSS), 那么这些将被包含在HTML head中的<link>标签内。

组态

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

第三方插件

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

扫码关注腾讯云开发者

领取腾讯云代金券