首页 文章

坚持使用webpack HMR配置

提问于
浏览
1

我正在尝试正确设置webpacks HMR,我正在开发一个小应用程序,以了解如何在React应用程序中使用Redux .

我遇到了webpack和HMR插件的问题,当实现 module.hot.accept 函数时,一切似乎工作正常,但我注意到当我修改我的 App 组件的依赖关系时,它只会重新呈现视图,当我不' t将任何依赖关系参数传递给 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,以便它只在我更改减少器上的内容时更新商店对象我对组件或容器进行更改时的视图 .

*** Edit *** 一点额外的信息,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

在此先感谢优秀的开发人员 .

1 回答

  • 0

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

    原来我在这个babel预设系列中做错了什么:

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

    正确的配置是:

    ['env', {modules: false}]
    

相关问题