Webpack máy chủ dev chế độ nóng không làm việc

Question

Heres cấu hình của tôi:

devServer: { 
    contentBase: '/web/dist/', 
    hot: true, 
    stats: {colors: true}, 
    inline: true 
} 

Và đây là những ngụm nhiệm vụ im chạy:

gulp.task('build', ['clean', 'styles', 'bower', 'media', 'data', 'homepage'], function(done) { 
    es6promise.polyfill(); 

    console.log('STARTING DEV SERVER...'); 

    server = new WebpackDevServer(webpack(webpackDevConfig), webpackDevConfig.devServer); 
    server.listen(8080, '0.0.0.0', function (err, stats) { 
     if (err) { 
      throw new gutil.PluginError("webpack-dev-server", err); 
     } 

     console.log('DEV SERVER STARTED'); 

     done(); 
    }); 
}); 

Mọi thứ hoạt động như mong đợi, ngoại trừ việc bốc nóng (không làm mới hoặc thay đổi khi Tôi thực hiện thay đổi đối với tệp). Tôi làm gì sai ở đây?

Answer 1

Bạn cần phải thêm <script src="http://localhost:8080/webpack-dev-server.js"></script> để index.html của bạn Nó không được thêm vào khi bạn sử dụng API

"Chú ý rằng cấu hình webpack không được đưa vào WebpackDevServer API, do đó devServer tùy chọn trong cấu hình webpack không được sử dụng trong việc này Ngoài ra, không có chế độ nội tuyến cho API WebpackDevServer. <script src="http://localhost:8080/webpack-dev-server.js"></script> nên được chèn vào trang HTML theo cách thủ công. " (http://webpack.github.io/docs/webpack-dev-server.html)

có lẽ bạn cũng cần phải thêm 'webpack/hot/dev-server' như một entrypoint để cấu hình webpack bạn

Answer 2

hãy chắc chắn để thiết lập

webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); 

trong webpackConfig cũng

Answer 3

Nếu bạn đang sử dụng Redux có thể thử điều này.

Vì một số lý do ngẫu nhiên redux-devtools không cho phép tải lại nóng cho tôi. Hãy thử xóa nó khỏi cấu phần gốc và cấu hình redux compose.

Lưu ý: Sử dụng Redux phần mở rộng trình duyệt devtool với cấu hình này trong cấu hình cửa hàng của bạn: window.devToolsExtension ? window.devToolsExtension() : f => f

Ngoài ra, phải đọc: https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

Hoặc thử nóng reload 3: dụ: https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915