webpack HMR 制定目录

Webpack Hot Module Replacement (HMR) 是一种实时热加载技术，允许你在不刷新页面的情况下更新应用程序的部分内容。这通常与`webpack-dev-server`一起使用，因为它支持HMR。

要启用HMR并制定目录，你需要设置以下步骤[^1]:

1. **配置开发服务器**:
使用`webpack-dev-server`启动服务器时，添加`hot`选项，例如：

   webpackDevServer: {
     hot: true,
     contentBase: './dist' // 指定应用文件的基础目录
   }

这里`contentBase`用于指定静态资源的根目录。

2. **Babel配置**:
如果你的代码使用了ES6+语法，需要配置Babel以支持HMR。对于React应用，可能还需要安装`react-hot-loader`库[^2]。

3. **更新入口文件**:
在主入口文件（通常是index.js）中，引入`react-hot-loader`并使其包裹你的组件树：

   import { render } from 'react-dom';
   import { AppContainer } from 'react-hot-loader'; // 引入HMR容器

   render(
     <AppContainer>
       {/* 应用组件 */
     </AppContainer>,
     document.getElementById('root')
   );

4. **开启HMR插件**:
在webpack配置中添加`HotModuleReplacementPlugin`，例如：

   module.exports = {
     // ...
     plugins: [
       new HtmlWebpackPlugin({
         template: 'index.html'
       }),
       new HotModuleReplacementPlugin()
     ]
   };

这样，当你修改源代码后，HMR会立即更新已更改的部分，无需手动刷新浏览器。