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文件输出到公共。

我刚收到这条消息：

      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包提供服务。这对于在hash中包含filename的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不输出任何内容

1 个答案: