使Webpack呈现在索引以外的文件中 [英] Make Webpack render in a file other than an index

问题描述

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

By default Webpack looks for a specific index.html file in a specified directory, right? What I want to know is can I tell webpack to look for and inject my bundled files in a file that I specify?

之所以这样问，是因为我正在尝试使用webpack开发Ghost主题，并且默认情况下，Ghost主题会寻找default.hbs文件作为索引文件.

I ask this because I'm trying to develop a Ghost theme with webpack and by default, a Ghost theme looks for a default.hbs file to serve as an index file.

我尝试使用HtmlWebpackPlugin设置所有条目的文件名，同时为Web Pack的输出制作相同的文件，但是它不起作用.

I tried to use the HtmlWebpackPlugin to set the filename for entry all while making the same file for web pack's output, but it's not working.

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

推荐答案

最简单的方法:您可以通过

Easiest way: you can configure webpack to use any file and template file via the html-webpack-plugin plugin. You can also specify the element to inject into.

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

这篇关于使Webpack呈现在索引以外的文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！