Webpackをインデックス以外のファイルにレンダリングする

Question

デフォルトでは、Webpackは特定のディレクトリに特定のindex.htmlファイルを探します。私が知りたいことは、私が指定したファイルにバンドルされたファイルを探し出して注入するようにwebpackに指示できますか？

私はwebpackでゴーストテーマを開発しようとしているので、これは尋ねます。デフォルトでは、ゴーストテーマはdefault.hbsファイルをインデックスファイルとして検索します。

ウェブパックの出力用に同じファイルを作成しているときに、HtmlWebpackPluginを使用してすべてのファイル名を設定しようとしましたが、動作しません。

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のを設定することができ

これが私の現在のwebpack.dev.config.jsです。また、注入する要素を指定することもできます。

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