Webpack-dev-serverはバンドル有効メッセージを表示した後でもバンドルしていません

Question

webpackで基本的な反応アプリケーションをセットアップしましたが、webpack-dev-serverが正しく動作しませんでした。

私はwebpack-dev-serverをグローバルにインストールし、ホットリロードが必要なので、コマンドsudo webpack-dev-server --hotを実行しようとしました。

プロジェクトはちょうどwebpack cmdで正常に動作しているようです。それは私のビルドフォルダにビルドし、それはいくつかのサーバーを介して動作させることができますが、それはwebpack-dev-serverで動作しません。ターミナルからビルドプロセスが完了してエラーがスローされずに完了しました。[webpack: bundle is now VALID.]と実際には正しく見ています。これは変更によってビルドプロセスがトリガーされますが、実際にはビルドされません.js]。私は全体の設定を変更しようとしたが、まだ解決された問題を得ることができませんでした。

誰かが助けてくれれば幸いです。

以下は私のwebpack.config.jsファイルです。

var path = require('path'); 

module.exports = { 
    devtool: '#inline-source-map"', 

    watch: true, 
    colors: true, 
    progress: true, 

    module: { 
     loaders: [{ 
      loader: "babel", 
      include: [ 
       path.resolve(__dirname, "src"), 
      ], 
      test: /\.jsx?$/, 
      query: { 
       plugins: ['transform-runtime'], 
       presets: ['es2015', 'react', 'stage-0'], 
      } 
     }, { 
      loader: 'style!css!sass', 
      include: path.join(__dirname, 'src'), 
      test: /\.scss$/ 
     }] 
    }, 

    plugins: [], 
    output: { 
     path: path.join(__dirname, 'build/js'), 
     publicPath: '/build/', 
     filename: '[name].js' 
    }, 
    entry: { 
     bundle: [ 
      './src/index.js' 
     ] 
    }, 

    devServer: { 
     contentBase: "./", 
     inline: true, 
     port: 8080 
    }, 
}; 

Answer 1

私は自分で解決した問題を持っています。黙って聞こえるが、問題はoutputオブジェクトの下のpublicPathであった。それは私の場合、私はWebPACKのファイルを提供している場所を確認しなければならなかったでは、すなわち、代わりにちょうど/build/の

output: { 
    path: path.join(__dirname, 'build/js'), 
    publicPath: '/build/js', // instead of publicPath: '/build/' 
    filename: '[name].js' 
}, 

Answer 2

webpack-dev-serverは、メモリからbundle.jsを提供します。実行するとファイルは生成されません。したがって、このシナリオではbundle.jsはファイルとして存在しません。

たとえば、bundle.jsを使用してサイズを最適化したり、運用環境のデプロイメントをテストしたりすることができない場合は、webpackコマンドを使用してwebpackで生成し、運用モードで提供してください。

Answer 3

をpathプロパティと一致する必要があります。

あなたはそれを見ることができます： http://localhost:8080/webpack-dev-server

その後、私は私が/dist/bundle.js

<script src="/dist/bundle.js"></script>私のindex.htmlの中には、今ではいずれかをリフレッシュすることを使用した後、私のbundle.jsパス> http://localhost:8080/dist/bundle.js

を見ることができましたファイルが変更されます。