Render Webpack to a file other than the index

Question

By default, Webpack looks for a specific index.html file in the specified directory, right? I want to know if I can tell webpack to search and insert my related files into the file that I am specifying?

I ask about this because I am trying to develop a Ghost theme using webpack, and by default the Ghost theme looks for the default.hbs file to work as an index file.

I tried using HtmlWebpackPlugin to set the file name to write everything by creating the same file to output the web package, but it does not work.

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' } }; 

Answer 1

The easiest way: you can configure webpack to use any file and template file using the html-webpack-plugin . You can also specify an input element.

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