html-webpack-plugin 未写入 index.html答案

【问题标题】：html-webpack-plugin not writing to index.htmlhtml-webpack-plugin 未写入 index.html
【发布时间】：2016-09-29 10:05:37
【问题描述】：

我正在尝试使用 html-webpack-plugin 将我的依赖项注入到我的全局 html 模板中，但到目前为止，每次构建时，它都会返回空白，如下所示：

Child html-webpack-plugin for "index.html":

不知道这里出了什么问题，有人可以帮忙吗？我将 Gulp 与 Webpack 和 Angular2 一起使用。

import HtmlWebpack from 'html-webpack-plugin'

const frontendLoader = {
    preloaders: {
        test: /\.ts$/,
        loader: 'tslint'
    },
    loaders: [{
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts'
    }, {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
    }, {
        test: /\.html$/,
        loader: 'raw'
    }]
}
module.exports = {
    frontendConfig: {
        debug: true,
        entry: {
            initial: ['./src/js/initial/initial.js'],
            vendor: ['./src/js/app/vendor'],
            app: ['./src/js/app/index']
        },
        resolve: {
            extensions: ['', '.ts', '.js']
        },
        devtool: 'source-map',
        output: {
            filename: '[name].bundle.js'
        },
        plugins: [
            new HtmlWebpack({
                inject: 'head',
                template: './public/views/index.html'
            })
        ],
        module: frontendLoader
    }
}

【问题讨论】：

输出的 html 看起来如何？（尝试在没有开发服务器的情况下运行它以查看此内容）

标签： angular gulp webpack

【解决方案1】：

在我看来，您正试图将 index.html 的内容包含到 HTMLWebpackPlugin 生成的 HTML 文件的头部。不过，我猜你真正想要的是将内容插入正文部分。

代替

plugins: [
            new HtmlWebpack({
                inject: 'head',
                template: './public/views/index.html'
            })
        ]

试试

plugins: [
            new HtmlWebpack({
                inject: 'body',
                template: './public/views/index.html'
            })
        ]

【讨论】：