Question

我之前已经问过这个问题。但它们都不适合我。当我更改代码时，控制台显示

[WDS] App热门更新......

但我没有看到浏览器中发生的变化。我使用的是最新的react-hot-loader，webpack^2.2.0-rc.0和相同版本的webpack-dev-server。这是我的webpack配置文件

const VENDOR_LIBS = [
  'react', 'lodash', 'redux', 'react-redux', 'react-dom',
  'react-input-range', 'redux-form', 'fabric'
];

module.exports = {
  entry: {
    bundle: './src/index.js',
    vendor: VENDOR_LIBS
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    // publicPath: 'dist/'
  },
  module: {
      rules: [
        {
          loader: ExtractTextPlugin.extract({
            loader: 'css-loader'
          }),
          test: /\.css$/,
        },
        {
          use: 'babel-loader',
          test: /\.js$/,
          exclude: /node_modules/,
        },
        {
          use: [
            {
              loader: 'url-loader',
              options: { limit: 40000 }
            },
            'image-webpack-loader'
          ],
          test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/,
        },
      ],
    },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest']
    }),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new ExtractTextPlugin('style.css'),
    new webpack.optimize.AggressiveMergingPlugin(),
  ],
  devServer: {
    historyApiFallback: true,
    hot: true
  },
};

babelrc

{
  "presets": ["babel-preset-env", "react"],
  "plugins": ["transform-object-rest-spread"],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    }
  }
}

index.js

const App = () => {
  const store = createStore(reducers, {}, applyMiddleware());

  return (
    <Provider store={store}>
      <ConvertImage />
    </Provider>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

我在路由中使用system.imports进行异步路由。

Answer 1

在packages.json中你需要有类似的东西：＆＃34;脚本＆＃34;：{ ＆＃34;开始＆＃34;：＆＃34; webpack-dev-server --progress --inline --hot --host 0.0.0.0＆＃34;，

Answer 2

您必须在运行时使用嵌入式HMR API来接受来自服务器的更改。至少，您需要在入口点脚本中的某处添加以下内容：

if (module.hot) {
    module.hot.accept()
}

查看新文档中提供的code sample以获得更好的主意。

Answer 3

您需要对index.js代码进行少量更改

导入RHL
IF ELSE检查是否启用热负载
将它包裹在AppContainer周围。

您的代码或多或少会像这样。

// Your other deps go here
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';

const App = () => {
  const store = createStore(reducers, {}, applyMiddleware());

  return (
    <Provider store={store}>
      <ConvertImage />
    </Provider>
  );
};

if (module.hot) {
  module.hot.accept();
  ReactDOM.render(
    <AppContainer>
      <App />
    </AppContainer>, document.getElementById("root")
  );
}
else {
  ReactDOM.render(<App />, document.getElementById("stub"));
}

另外，添加你的反应热插拔器/补丁＆＃39;到webpack config中的入口数组

反应热加载程序不显示浏览器中的更改

3 个答案: