How to make Webpack work with .hbs files?

Question

I'm trying to make a theme for Ghost using React. I'm using webpack as my build tool of choice. How can I tell webpack to serve a specific .hbs file? As it seems now, Webpack only supports .html files. Below is my dev config... does webpack normally support anything that gets passed 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'
  }
};

this path would be my recommendation http://stackoverflow.com/a/38129291/1963929 — Claudiordgz, Aug 23 '16 at 00:55
So you can try handlebars-loader, but if you have helpers, it doesn't work. Right now I'm going down the path of importing Handlebars and just trying to have.. a text loader of some kind... I dunno we'll see lol, will respond here — Caleb Jay, Feb 28 '18 at 22:50

score 0 · Answer 1 · answered May 22 '19 at 16:13

Webpack doesn't supports .html, the HtmlWebpackPlugin is the one that does html manipulations.

The basic purpose of HtmlWebpackPlugin is to attach the compiled files as script / link tags into the template file that it gets, it works with string replace, so it doesn't matter what file is that.

In one of my projects I use PHP as the template that HtmlWebpackPlugin injects into it the bundles.

So, theoretically, HtmlWebpackPlugin "supports" handlebars without understanding handelbars syntax.

What you can do, is after webpack injected the bundles into the handlebars template, you can read and us it as your template, and render the html with it using handlebar's node api.

How to make Webpack work with .hbs files?

1 Answers1