HtmlWebpackPlugin擦除模板div

Question

HtmlWebpackPlugin擦除模板div

Fab*_*ner 0 javascript reactjs webpack html-webpack-plugin

我按照这个例子(http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301)启动一个reactj应用程序,所以这是我的webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  tempalte : __dirname + '/app/index.html',
  filename : 'index.html',
  inject : 'body'
})
module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path : __dirname + '/dist',
    filename : "index_bundle.js"
  },
  module : {
    loaders :[
      {test: /\.js$/, include: __dirname + '/app', loader: "babel-loader"}
    ]
  },
  plugins : [HtmlWebpackPluginConfig]
}

Run Code Online (Sandbox Code Playgroud)

这是我的index.html模板:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> teste</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是我的web.html生成的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script src="index_bundle.js"></script></body>
</html>

Run Code Online (Sandbox Code Playgroud)

注意:我被删除了,所以当我尝试运行我的应用程序时,我收到了错误:

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Run Code Online (Sandbox Code Playgroud)

我怎么能解决不要删除我的div？我使用"babel-core":"^ 6.7.6","babel-loader":"^ 6.2.4","babel-preset-react":"^ 6.5.0","html-webpack-plugin" :"^ 2.15.0","webpack":"^ 1.13.0","webpack-dev-server":"^ 1.14.1"

TKS

Answer 1

max*_*max 5

template配置中密钥中的拼写错误表示它使用的是默认模板,而不是您尝试包含的模板.默认行为使此错误很难发现.

tempalte : __dirname + '/app/index.html' 应该 template : __dirname + '/app/index.html'

归档时间：	10 年，1 月前
查看次数：	1378 次
最近记录：	10 年，1 月前