Make Webpack render in a file other than an index

Question

By default Webpack looks for a specific index.html file in a specified directory, right? What I want to know is can I tell webpack to look for and inject my bundled files in a file that I specify?

I ask this because I'm trying to develop a Ghost theme with webpack and by default, a Ghost theme looks for a default.hbs file to serve as an index file.

I tried to use the HtmlWebpackPlugin to set the filename for entry all while making the same file for web pack's output, but it's not working.

This is my current webpack.dev.config.js:

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

module.exports = {
  entry: [
  'webpack-dev-server/client?http://localhost:2368',
    'webpack/hot/only-dev-server',
    './src/router'
  ],
  devtool: 'eval',
  debug: true,
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/static/'

  },
  resolveLoader: {
    modulesDirectories: ['node_modules']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      hash: true,
      filename: 'default.hbs',
      template: __dirname + '/public/default.hbs',
    })

  ],
  resolve: {
    extensions: ['', '.js', '.sass', '.css', '.hbs']
  },
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    },
    // CSS
    {
      test: /\.sass$/,
      include: path.join(__dirname, 'src'),
      loader: 'style-loader!css-loader!sass-loader'
    },
    // handlebars
    {
      test: /\.hbs$/,
      include: path.join(__dirname, 'public'),
      loader: 'handlebars-template-loader'
    }
    ]
  },
  node: {
    fs: 'empty'
  }
};

Police

Answer 1

Easiest way: you can configure webpack to use any file and template file via the html-webpack-plugin plugin. You can also specify the element to inject into.

import HtmlWebpackPlugin from 'html-webpack-plugin';
[...]
  const plugins = [
    new HtmlWebpackPlugin({
      template: 'templates/myTemplateFile.tpl.html',
      inject: 'body',
      filename: 'myOutputFile.html'
    })
  ];

Wingfooted