2

我看到以前有人问过这个问题。但他们都没有为我工作。当我更改代码时，控制台显示

[WDS] 应用热更新...

但我没有看到浏览器中发生的变化。我正在使用最新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在路由中使用异步路由。

4

3 回答 3

0

在 packages.json 你需要有类似的东西： "scripts": { "start": "webpack-dev-server --progress --inline --hot --host 0.0.0.0",

于 2017-01-16T06:50:22.530 回答
0

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

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

查看新文档中提供的代码示例以获得更好的想法。

于 2017-01-16T09:17:54.900 回答
0

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

  1. 导入 RHL
  2. IF ELSE 检查是否启用热加载
  3. 将它包裹在 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"));
}

此外，将您的“react-hot-loader/patch”添加到 webpack 配置中的条目数组

于 2017-03-02T13:24:08.073 回答