CODEWITHSUNDEEP
webpackhtml-webpack-plugin
SuperUberDuper
SuperUberDuper

Reputation: 9623

HtmlWebpackPlugin doesn't output anything

HtmlWebpackPlugin doesn't output anything to the webpack output dir: I have this setup:

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'
    })
  ]
}

however no index.html file is output to public.

I just get this message:

      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

Upvotes: 3

Views: 1710

Answers (1)

Kasiriveni
Kasiriveni

Reputation: 5921

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.

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;

Output: 

<!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>

you can do customization also like this configuration

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

Upvotes: 1

Related Questions