HtmlWebpackPluginは消去テンプレートのdiv

は、私は1つのreactjアプリを起動するには、この例（http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760301）に従うので、これは私の webpack.config.jsHtmlWebpackPluginは消去テンプレートのdiv

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の

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

注によって生成された私のindex.htmlです：私のアール私のアプリケーションを実行しようとするとエラーが発生しました：

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

私のdivを削除しないでください。私は "babel-core"を使用しています： "^ 6.7.6"、 "バベルローダー"： "^ 6.2.4"、 "バベルプリセット反応"： "^ 6.5.0"、 "html -webpack-プラグイン "： "^ 2.15.0"、 "WebPACKの"： "^ 1.13.0"、 "のWebPACK-devのサーバー"： "^ 1.14.1"

TKS

出典

2016-04-16 Fabio Ebner

A構成内のtemplateキーのタイプミスは、含まれているテンプレートではなく、デフォルトのテンプレートを使用していることを意味します。デフォルトの動作では、このエラーを検出するのが難しくなります。

tempalte : __dirname + '/app/index.html'

は、もう少し明確な違いを作る、 template : __dirname + '/app/index.html'

出典

2016-04-16 15:33:37 max

ナイスキャッチする必要があります。 –

tksと申し訳ありません..私の悪い:) –

HtmlWebpackPluginは消去テンプレートのdiv

答えて

関連する問題