0

この例（http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301）に従って、1つの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>

これはwebpackによって生成された私の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

4

1 に答える 1