How to get Webpack to work with .hbs files?

Question

I am trying to create a theme for Ghost using React. I use webpack as my build tool. How can I tell webpack to serve a specific .hbs file? As it now seems, Webpack only supports .html files. Below is my dev config ... does webpack usually support anything that gets into it?

 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, 'public'), filename: 'bundle.js', //publicPath: '/static/' }, resolveLoader: { modulesDirectories: ['node_modules'] }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new HtmlWebpackPlugin({ template: './public/default.hbs', //hash: true, inject: 'body', filename: 'default.hbs' }) ], resolve: { extensions: ['', '.js', '.sass', '.css', '.hbs'] }, module: { loaders: [ // js { test: /\.js$/, 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

Webpack does not support .html , HtmlWebpackPlugin is the one that does HTML manipulation.

The main goal of HtmlWebpackPlugin is to attach compiled files in the form of script / link tags to the resulting template file, it works with replacing strings, so it does not matter what the file is.

In one of my projects, I use PHP as a template that HtmlWebpackPlugin embeds in packages.

Thus, theoretically, HtmlWebpackPlugin "supports" the wheels without understanding the handelbars syntax.

What you can do is, after the web package has embedded the packages in the steering template, you can read it and use it as your template, and display the html with it using the steering node api.