跳到主要内容

html-webpack-plugin 模板选项

历史​

The version 2.x which was introduced last year (Sep, 2015) changed the way the template is processed.

去年（九月，2015）引进的 2.x 版本，改变了产生模板的方式。 Instead of forcing all users to use the blueimp template engine it allowed to use any webpack loader:

允许使用任意 webpack loader 取代了强制所有用户使用 blueimp 模板引擎。

Under the hood it is using a webpack child compilation which inherits all loaders from your main configuration.

新版使用了一个继承自你配置配置的 loaders 的 webpack 的子编译。

There are three ways to set the loader:

有三种设置 loader 的方式：

1) Don't set any loader​

  1. 不设置任何 loader

By default (if you don't specify any loader in any way) a fallback lodash loader kicks in.

默认情况下会使用一个后备的 lodash loader 来加载模板。

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

Be aware, using .html as your template extention may unexpectedly trigger another loader.

注意，使用 .html 作为模板扩展名的话可能会意外使用了其他 loader。

2) Setting a loader directly for the template​

  1. 直接在模板中设置 loader
new HtmlWebpackPlugin({
  // For details on `!!` see https://webpack.github.io/docs/loaders.html#loader-order
  template: '!!handlebars!src/index.hbs'
})

3) Setting a loader using the module.loaders syntax​

  1. 在 module.loaders 中设置 loader
{
  module: {
    loaders: [
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader'
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.hbs'
    })
  ]
}

However this also means that in the following example webpack will use the html loader for your template. This will cause html minification and it will also disable the ejs fallback loader.

这样意味着下面的 wbepack 例子会使用 html loader 来处理你的模板。

这会使你的模板被压缩，并且不会使用 ejs 的后备 loader.

{
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}