ウェブパックは反応しません。

私はちょうど反応を開始し、codecademyコースと他のいくつかの他のyoutubeで終了しました。私は反応のために私のローカルマシンを構成することにしました。私はwebpack & webpack-dev-serverから始めました。そしてここで私は間違いをする。ここで Here is mistake screenshot ウェブパックは反応しません。

Also Here is my files tree

私webpack.config.jsです：

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    devtool: 'inline-source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:8080/', 
     'webpack/hot/only-dev-server', 
     './src' 
    ], 
    output: { 
      path: path.join(__dirname, 'public'), 
      filename: "bundle.js" 
    }, 
    resolve: { 
     modulesDirectories: ['node_modules', 'src'], 
     extensions: ['', '.js'] 
    }, 
    module: { 
     loader: [ 
     { 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] 
     } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin() 
    ] 
};

私のindex.html：

<!DOCTYPE html> 
<html> 
<head> 
    <title>React ToDos App</title> 
</head> 
<body> 
    <div id="app" /> 
    <script src="bundle.js"></script> 
</body> 
</html>

そしてindex.js：

let message = 'Hello from entry message'; 

console.log(message);

何か助けていただきありがとうございます。

出典

2016-10-17 Kirill Stas

である必要があり、あなたのスクリーンショットで

あなたに静的フォルダの設定を表現しています'index.js'ファイル？ –

どういう意味ですか？私はまだそれほど進歩的ではありません。 –

[Expressで静的ファイルを提供する]（https://expressjs.com/en/starter/static-files.html）、パブリックフォルダへの出力を指定する必要もあります。 –

私はあなたのコード内の二つの問題を参照してください。JSバンドルの名前は、HTMLにし、WebPACKの中で同じでなければなりません

を - あなたはあなたのhtmlでのWebPACKの設定とbundle.jsでready.jsを使用しています。あなたはWebPACKのコンフィグレーションのタイプミスと名前がwebpack.congig.jsで持っているが、それはwebpack.config.js（それはWebPACKの-devのサーバーでデフォルトで使用される）

出典

2016-10-17 15:56:26

ありがとうございました。 2番目の答えです。誰がこれを読んで、あなたのコードに注意してください。 –

webpack設定では、filenameをready.jsと設定し、HTMLにはbundle.jsを探しています。これがエラーの原因です。両方の場所で同じ名前をつけてください。

<!DOCTYPE html> 
<html> 
<head> 
    <title>React ToDos App</title> 
</head> 
<body> 
    <div id="app" /> 
    <script src="ready.js"></script> 
</body> 
</html>

出典

2016-10-17 15:37:43

私はそれについて知っていて、うまく動作しません。 –

@KirillStasコンパイル中にエラーが発生しますか？ –

コンソールタイプのwebpackの場合のみ、 'Output filename not configured'が返されます。 –

ウェブパックは反応しません。

答えて

関連する問題