HtmlWebpackPlugin 不输出任何东西

Question

HtmlWebpackPlugin 不向 webpack 输出目录输出任何内容：我有这个设置：

var config = {
  context: __dirname + '/client',
  entry: {
    main: [
      "./app.js"
    ]
  },
  output: {
    path: __dirname + "./public",
    filename: "dist.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        include: [
          path.resolve(__dirname, 'client'),
        ],
        exclude: /node_modules/

      },
      {
        test: /\.less$/,
        loader: "style!css!less"
      },
      {
        test: /\.css/,
        loader: "style!css"
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Webpack demo'
    })
  ]
}

但是没有 index.html 文件输出到 public。

我刚收到这条消息：

      Asset       Size  Chunks             Chunk Names
    dist.js     530 kB       0  [emitted]  main
dist.js.map     638 kB       0  [emitted]  main
 index.html  181 bytes          [emitted]
   [0] multi main 28 bytes {0} [built]
    + 130 hidden modules
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

Answer 1

HtmlWebpackPlugin 简化了 HTML 文件的创建以服务于您的 webpack 包。这对于在 filename 中包含 hash 的 webpack 包特别有用，它会更改每次编译。您可以让插件为您生成一个 HTML 文件，使用 lodash 模板 提供您自己的模板，或者使用您自己的 加载程序 .

wbpack.config.js

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

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

module.exports = webpackConfig;

输出：

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

你也可以这样定制 configuration

new HtmlWebpackPlugin({
  title:'sample text',
  filename:'sample.index'
)

HtmlWebpackPlugin 不输出任何东西

HtmlWebpackPlugin doesn't output anything

webpack

html-webpack-plugin