我按照这个例子(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]
}
这是我的index.html模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> teste</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
这是我的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>
注意:我被删除了,所以当我尝试运行我的应用程序时出现错误:
Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.
如何解决不要删除我的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
答案 0 :(得分:5)
配置中template
项中的拼写错误表示它使用的是默认模板,而不是您尝试包含的模板。默认行为使得很难发现此错误。
tempalte : __dirname + '/app/index.html'
应该
template : __dirname + '/app/index.html'