React - webpack hmr

Question

第一次與webpack和相關的東西修補。我試圖結合webpack-dev-server和瀏覽器同步的好處，使我更新一個反應組件，我的瀏覽器不重新加載，它只是使用熱模塊更換。我猜有很多樣板，但我從頭開始。

即時到HMR打開並聆聽變化。我編輯一個組件，它接收到更改並說App是最新的。但是這個視圖並沒有改變，幾秒鐘後我得到一個Web Socket錯誤。

，如果這是很難讀它基本上是說網絡套接字錯誤，插座完成握手之前關閉...的package.json的

我的WebPack配置

const webpack = require("webpack"); 
const path = require("path"); 
const SRC_DIR = path.resolve(__dirname,'src'); 
const DIST_DIR = path.resolve(__dirname,'dist'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 

module.exports = { 

    entry: [ 
     'react-hot-loader/patch', 
     'webpack/hot/only-dev-server', 
     `${SRC_DIR}/index.js` 
    ], 
    output: { 
     path: DIST_DIR, 
     publicPath: '', 
     filename: 'bundle.js' 

    }, 

    module: { 
     rules: [ 
      { 
       test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader','sass-loader'] 
       }) 
      }, 
      { 
       test: /\.(png|svg|jpg|gif)$/, 
       use: ['file-loader'] 
      }, 
      { 
       test: /\.js?$/, 
       use: ['babel-loader'], 
       include: SRC_DIR 
      } 
      ] 
    }, 

    plugins: [ 
     new CleanWebpackPlugin(['dist']), 
     new HtmlWebpackPlugin({ 
      inject: false, 
      template: require('html-webpack-template'), 
      appMountId: 'root', 
      devServer: '0.0.0.0' +':'+ 8081, 
      title: "Webpack 4 React" 
     }), 
     new ExtractTextPlugin("styles.css"), 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NamedModulesPlugin(), 
     new BrowserSyncPlugin({ 
      host: process.env.IP, 
      port: process.env.PORT, 
      //server: { baseDir: ['dist'] }, 
      ui: { 
       port: 8082 
      }, 
      proxy: process.env.IP +':'+ 8081 
     }, 
     { 
      reload: false 
     } 
     ) 
     ], 

    devtool: 'source-map', 

    devServer: { 
     publicPath:'', 
     host: process.env.IP, 
     port: 8081, 
     hot: true 
    } 
}; 

通天部分

"babel": { 
    "presets":["es2015","react"], 
    "plugins": ["react-hot-loader/babel"] 
} 

許多移動部件和方法使得這是一個棘手的問題。但我覺得即使這不是最優化的設置，我已經接近讓它工作。畢竟，我的瀏覽器同步頁面正在從WDS獲取HMR json。也許我錯過了一些簡單的東西。一個奇怪的是公共路徑的概念，例如，我似乎無法讓它工作，除非它是一個空字符串。就像我說這是帶有webpack的第一天，我還有很多東西要在這裏學習。謝謝。

我也許應該補充我index.js，爲切入口的WebPack

import { AppContainer } from 'react-hot-loader'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './Components/App'; 
import './styles.scss'; 

const root = document.getElementById("root"); 
//ReactDOM.render(<App/>,root); 

const render = Component => 
    ReactDOM.render(
    <AppContainer> 
     <Component /> 
    </AppContainer>, 
    root 
); 

render(App); 

if (module.hot) module.hot.accept('./Components/App',() => render(App)); 

Answer 1

只是爲了跟進我已經得到的東西的工作，只有輕微的變化，以上面的代碼。首先在index.js。我錯過了新的更新組件的聲明。所以：

if (module.hot) module.hot.accept('./Components/App',() => render(App)); 

替換爲以下幾點：

if (module.hot) module.hot.accept('./Components/App',() => { 
    const newApp = require("./Components/App").default; 
    render(newApp); 
}); 

由於我使用的反應，反應熱裝載機，神奇的是做，我的變化採取不重新加載頁面的效果，從而失去州。我發現的一個警告是，如果我的更改涉及到爲組件創建構造函數和狀態，這會導致頁面重新加載，但這是有道理的。我不得不改變我處理scss文件的方式。我正在使用ExtractTextPlugin。經過一些研究後，我發現這對生產更好，並且不支持HMR。這是從Webpack文檔直接。所以我不得不改變我的webpack.config.js。我在插件部分註釋了插件的使用並將我的scss規則更改爲以下內容。

{ 
       test: /\.scss$/, 
       use: [ 
        { 
         loader: 'style-loader' 
        },{ 
         loader: 'css-loader' 
        },{ 
         loader: 'sass-loader' 
        } 
        ] 
       /* no HMR better for production 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader','sass-loader'] 
       })*/ 
      }, 

以上是整個scss規則我只是註釋掉這樣我就可以把它添加到在未來的WebPack生產配置文件的舊東西。現在它在下一個，引入了redux和反應路由器。