Question

我正在尝试正确设置网络包HMR，我正在开发一个小应用程序，以便了解如何在React应用程序中使用Redux。

我遇到了webpack和HMR插件的问题，在实现module.hot.accept函数时，一切似乎都运行良好，但我注意到当我修改{{1}的依赖关系时如果我没有按照webpack的文档中的规定将任何依赖性参数传递给App，它只会重新呈现视图。

这是文档说我应该做的：

module.hot.accept

这是我尝试做的事情，但这并不奏效。

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，我想正确配置webpack，以便它只更新商店当我更改我的组件或容器时，我在reducers上更改了对象和视图。

*编辑* 一点点额外的信息，webpack似乎知道更新bc它在控制台登录更新的模块，但不会重新渲染任何东西。

这是我的webpack.config.js

<Provider> does not support changing 'store' on the fly

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

Answer 1

所以这是我认为的babel配置，你需要在babel配置中选择modules: false，所以它让webpack处理模块，这是一个noob的错误，但男人，它让我疯了几天。 / p>

原来我在这一系列的babel预设中做错了什么：

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

正确的配置是：

['env', {modules: false}]

坚持使用webpack HMR配置

1 个答案: