使 Webpack 在索引以外的文件中呈现答案

【问题标题】：Make Webpack render in a file other than an index使 Webpack 在索引以外的文件中呈现
【发布时间】：2016-11-01 18:10:37
【问题描述】：

默认情况下，Webpack 在指定目录中查找特定的index.html 文件，对吗？我想知道的是我可以告诉 webpack 在我指定的文件中查找并注入我的捆绑文件吗？

我问这个是因为我正在尝试使用 webpack 开发 Ghost 主题，默认情况下，Ghost 主题会查找 default.hbs 文件作为索引文件。

我尝试使用HtmlWebpackPlugin 来设置条目的文件名，同时为 webpack 的输出制作相同的文件，但它不起作用。

这是我目前的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'
  }
};

【问题讨论】：

标签： javascript webpack webpack-dev-server ghost

【解决方案1】：

最简单的方法：你可以通过html-webpack-plugin插件配置webpack使用任何文件和模板文件。您还可以指定要注入的元素。

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

【讨论】：