如何让 Webpack 使用 .hbs 文件？答案

【问题标题】：How to make Webpack work with .hbs files?如何让 Webpack 使用 .hbs 文件？
【发布时间】：2016-07-01 00:13:00
【问题描述】：

我正在尝试使用 React 为 Ghost 制作主题。我使用 webpack 作为我选择的构建工具。如何告诉 webpack 提供特定的 .hbs 文件？现在看来，Webpack 只支持 .html 文件。下面是我的开发配置... 是否 webpack 通常支持任何传入其中的内容？

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

【问题讨论】：

对这么有趣的问题甚至没有评论
这条路径是我的推荐stackoverflow.com/a/38129291/1963929
从模板生成 default.hbs
所以你可以试试handlebars-loader，但是如果你有helpers，那就不行了。现在我正在走导入 Handlebars 的道路，只是想拥有……某种文本加载器……我不知道我们会看到大声笑，会在这里回复

标签： javascript webpack ghost-blog

【解决方案1】：

Webpack 不支持.html，HtmlWebpackPlugin 是做 html 操作的那个。

HtmlWebpackPlugin 的基本目的是将编译后的文件作为script / link 标签附加到它获取的模板文件中，它与字符串替换一起使用，所以不管是什么文件。

在我的一个项目中，我使用 PHP 作为模板，HtmlWebpackPlugin 将包注入其中。

因此，理论上，HtmlWebpackPlugin“支持”车把而不了解车把语法。

您可以做的是，在 webpack 将包注入到车把模板后，您可以将其作为您的模板读取并使用，并使用车把的节点 API 渲染 html。

【讨论】：