坚持webpack HMR配置

Question

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

我遇到了webpack和HMR插件的问题，当实现module.hot.accept函数时，一切似乎都很好，但我注意到，当我修改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中没有依赖项的情况下重新呈现视图。

这里的问题是，如果我不传递任何依赖项，它将尝试重新加载我的存储对象，这会引发以下警告：<Provider> does not support changing 'store' on the fly，我希望正确配置webpack，这样它只在我更改还原器上的内容时更新存储对象，在更改组件或容器时更新视图。

*编辑*的一些额外的信息，webpack似乎知道更新bc它记录在控制台更新的模块，但不改变任何东西。

这是我的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处理模块，这是一个错误，但是伙计，它让我疯狂了好几天。

原来我在巴贝尔预置的这一行里做错了什么：

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

正确的配置是：

['env', {modules: false}]