html-webpack-plugin不寫入index.html

Question

我想使用html-webpack-plugin將我的依賴項注入到我的全局html模板中，但是到目前爲止，每次構建時，它都會返回空白，就像這樣：

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

不知道發生了什麼事情錯在這裏，任何人都可以幫忙嗎？我正在使用Webpack和Angular2的Gulp。

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