Question

我正在尝试使用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
    }
}

Answer 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'
            })
        ]

html-webpack-plugin没有写入index.html

1 个答案: