2

私はそれ自身で完璧に動作するWebpack構成を持っています。私は、webpack-dev-serverを必要とするように、React Hot LoaderをHMRと一緒にインストールしようとしています。ここで私はそれを働かせることはできません。私のバンドルがどこにあるのかわかりません。私はそれがちょうどlocalhost:3000であることを望む。Webpackデベロップメントサーバとリアクト・ホットローダー

マイ webpack.config.js

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

module.exports = { 
    watch: true, 

    devtool: 'eval', 

    // entry: './src/main.js', This runs just for webpack bundling 

    entry:[ 
    'webpack-dev-server/client?http:localhost:9000', // WebpackDevServer host and port 
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors 
    './src/main.js' // Your appʼs entry point 
    ], 

    output: { 
    path: path.resolve(__dirname, 'public', 'dist'), 
    filename: 'main.js'/*, 
    publicPath: '/dist/'*/ 
    }, 

    module: { 
    loaders: [{ 
     test: /\.js$/, 
     loaders: ['react-hot', 'babel-loader?cacheDirectory=true,presets[]=react,presets[]=es2015'], 
     exclude: function(path) { 
     var isModule = path.indexOf('node_modules') > -1; 
     var isJsaudio = path.indexOf('jsaudio') > -1; 

     if (isModule && !isJsaudio) { 
      return true; 
     } 
     } 
    }, { 
     test: /\.json$/, 
     loader: "json-loader" 
    }] 
    }, 

    plugins: [ 
    new webpack.HotModuleReplacementPlugin() 
    ], 

    resolve: { 
    extensions: ['', '.js', '.json', 'index.js'], 
    root: [ 
     path.resolve(__dirname, 'src'), 
     path.resolve(__dirname, 'node_modules'), 
     path.resolve(__dirname, 'node_modules', 'jsaudio', 'src') 
    ] 
    }, 

    target: 'web', 

    node: { 
    fs: 'empty', 
    net: 'empty', 
    tls: 'empty' 
    } 
}; 

そしてwebpack-server.js

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    publicPath: '/dist/', 
    hot: true, 
    historyApiFallback: true 
}).listen(9000, 'localhost', function (err, result) { 
    if (err) { 
    return console.log(err); 
    } 

    console.log('Listening at http://localhost:9000/'); 
}); 

更新:リンク質問はそれも確認した答えを持っていない、特に以来、役に立ちません。

+0

[Webpack Dev Server(webpack-dev-server)ホットモジュール交換(HMR)が動作しない]の可能な複製(http://stackoverflow.com/questions/36212249/webpack-dev-server-webpack- dev-server-hot-module-replacement-hmr-not-working) –

+0

リンクされた質問は、特に確認済みの回答さえないので、助けになりません。 – Emo

答えて

1

ホットリロード作業を行うためのアップデートとして、反応ホットローダーv3を試してみることをお勧めします(私の意見では!)。 WebPACKの中

そして今だけ必要ポイントを試してみてください。ここ

entry: { 
    app: [ 
     'react-hot-loader/patch', 
     'webpack-hot-middleware/client', 
     `${SRC}/client-entry.js` 
    ] 
} 

は、私は自分のアプリに人add react-hot-loader v3を支援するために作成したサンプルアプリ、react-legoへのリンクです。それは助けることを望む

関連する問題