坚持 webpack HMR 配置

Question

我正在尝试正确设置 webpacks HMR，我正在开发一个小应用程序以学习如何在 React 应用程序中使用 Redux。

我运行遇到了 webpack 和 HMR 插件的问题，当实现 module.hot.accept 函数时，一切似乎都工作正常，但我注意到当我修改我的依赖项时App 组件它只在我没有将任何依赖参数传递给 module.hot.accept 时重新呈现视图，如 webpack 文档中指定的那样。

文档中说我应该这样做：

module.hot.accept(
  dependencies, // Either a string or an array of strings
  callback // Function to fire when the dependencies are updated
)

这就是我正在尝试做的，这不起作用。

module.hot.accept('./components/App', () => {
  render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  )
})
module.hot.accept('./reducers', () => {
  // Reconfigure the store
})

这个有效

module.hot.accept(() => {
  // Render function
})

所以假设我的 App 组件，我作为 <Provider> 的子组件渲染的组件导入了一个 Header 组件，并像这样渲染：

const App = () => (
  <div>
    <Header />
  </div>
)

然后，如果我编辑 Header，如果 module.hot.accept

中没有依赖项，浏览器将仅重新呈现视图

这里的问题是，如果我不传递任何依赖项，它会尝试重新加载我的商店对象并触发此警告：<Provider> does not support changing 'store' on the fly，我想正确配置 webpack，以便它只更新商店当我改变我的减速器上的东西时对象和当我改变我的组件或容器时的视图。

* 编辑 * 一点额外的信息，webpack 似乎知道更新，因为它在控制台中记录了更新的模块，但是没有重新渲染任何东西。

这是我的webpack.config.js

const path = require('path')
const webpack = require('webpack')

const namedModules = new webpack.NamedModulesPlugin();
const hotModuleReplacement = new webpack.HotModuleReplacementPlugin();

const config = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.jsx',
  devtool: 'eval-source-map',
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      include: path.resolve(__dirname, 'src'),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: [
            ['env', {'es2015': {'modules': false}}],
            'react'
          ],
          plugins: [
            'transform-object-rest-spread',
          ]
        }
      }]
    }]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '*'],
    modules: [
      'node_modules'
    ]
  },
  plugins: [
    namedModules,
    hotModuleReplacement
  ],
  devServer: {
    port: 9000,
    host: 'localhost',
    inline: true,
    hot: true
  }
}

module.exports = config

提前致谢，优秀的开发人员。

Answer 1

所以这是我认为的 babel 配置，你需要在 babel 配置中使用 modules: false 选项，这样它就可以让 webpack 处理模块，这是一个菜鸟错误，但是伙计，这让我抓狂了好几天.

原来我在这行 babel 预设中做错了：

['env', {'es2015': {'modules': false}}]

正确的配置是：

['env', {modules: false}]

坚持 webpack HMR 配置

Stuck with webpack HMR configuration

reactjs

webpack

redux

react-redux

webpack-hmr