模块热替换（Hot Module WordStrment）：

当我们使用webpackDevServer，改削内容的时候，会自动刷新页面。当我们需要在改削代码的时候不刷新页面，仅更新改削后的代码的时候，就可以使用HMR，需要在webpack.cnfig.js中：

const webpack=require(‘webpack‘); devServer:{ contentBase:‘./dist‘, open:true, hot:true, // 新增，在某些模块不撑持热更新的时候会新刷新页面 hotOnly:true // 新增，即使在模块不撑持热更新的时候也不会刷新页面，而是在控制台输出热更新掉败 }, plugins:[ new HtmlWebpackPlugin({template:‘src/index.html‘}), new CleanWebpackPlugin(), new webpack.HotModuleWordStrmentPlugin() // 新增 ],

babel：

npm install babel-loader @babel/core

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }

还需要安置和配置：

npm install @babel/preset-env --save-dev

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options:{ presets:[‘@babel/preset-env‘] } }

还需要安置polyfill，因为有一些语法（如promise、map等不会被转换）：

npm install --save @babel/polyfill

在业务代码顶部（如index.js）：
import "@babel/polyfill";
这个时候会把所有ES6语法的转换都打包进main.js，所以文件会出格大，但是当我们只需要转换某些特性，如Promise的时候，就显得冗余,可以通过如下配置解决：

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options:{ presets:[[‘@babel/preset-env‘],{ useBuiltIns:‘usage‘ }] } }

这个意思是当我们做polyfill转换语法的时候，不是把所有特性都加进来，而是按照业务代码来决定到底要加什么
还可以加上其他配置，如：

presets:[[ ‘@babel/preset-env‘, { useBuiltIns:‘usage‘, targets:{ // edge:‘17‘, // firefox:‘60‘, chrome:‘>67‘, // safari:‘11.2‘ } }, ]]

它的意思是我们打包后的项目会运行在大于67版本的chrome浏览器下，这个时候babel需要判断是否需要做ES6到ES5的转换

当我们在开发类库、第三方模块或者组件库的时候用babel/polyfill会有问题，因为它会以全局变量的形式注入，会污染到全局环境，所以需要换一种打包方法：
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
还要改削配置：

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", options:{ "plugins": [["@babel/plugin-transform-runtime",{ "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false }]] } }

这个时候打包会报关于corejs的错，因为还需要安置：
npm install --save @babel/runtime-corejs2
plugin-transform-runtime会以闭包的形式去引入内容，，不存在全局污染的问题，固然，在业务代码中只要使用polyfill就可以了。

babel的配置可能会很长，所以我们可以创建一个.babelrc文件，将相关配置项放到里面：

{ "plugins": [["@babel/plugin-transform-runtime",{ "corejs": 2, "helpers": true, "regenerator": true, "useESModules": false }]] }，

webpack.config.js中就不需要了：

{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }

打包react：

npm install --save react react-dom
.babelrc中的内容为：