Machen Sie Webpack in einer anderen Datei als einem Index rendern

Question

Standardmäßig sucht Webpack nach einer bestimmten index.html Datei in einem angegebenen Verzeichnis, richtig? Was ich wissen will ist, kann ich Webpack sagen, nach meinen gebündelten Dateien in einer Datei zu suchen und zu injizieren, die ich spezifiziere?

Ich frage dies, weil ich versuche, ein Ghost-Theme mit Webpack zu entwickeln, und ein Ghost-Theme sucht standardmäßig nach einer default.hbs-Datei, die als Indexdatei dient.

Ich habe versucht, die HtmlWebpackPlugin verwenden, um den Dateinamen für den Eintrag alle während der gleichen Datei für die Ausgabe des Web Packs, aber es funktioniert nicht.

Dies ist mein aktueller 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

Die einfachste Weg: Sie webpack konfigurieren können über die html-webpack-plugin Plugin jede Datei und Template-Datei zu verwenden. Sie können auch das zu injizierende Element angeben.

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