Question

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

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

我尝试使用HtmlWebpackPlugin设置条目的文件名，同时为web pack的输出创建相同的文件，但它不起作用。

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

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

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

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

1 个答案: