# Webpack (五) -- JSX 和静态资源打包
> Babel 中主要两个概念 presets 和 plugins
>
> presets 可以看作一系列 plugins 的集合，
>
> @babel/preset-env 解析 es6 语法
> @babel/preset-react 解析 jsx
## JSX 解析
```json
// .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": [["@babel/plugin-transform-runtime"]] // 解析 async await
}
```
在 webpack.config 中配置 babel-loader
## 热更新原理
- Webpack Compile:
将 JS 编译成 bundle
- HMR Server
将热更新文件传递给 HMR runtime
- Bundle Server
提供文件在浏览器的访问
- HMR Runtime
注入到浏览器，更新文件变化
## 静态资源内联
> - 防止首屏没有加载完成 css 发生的界面抖动
> - 减少 http 请求
- HTML JS 内联 -- row-loader
- CSS 内联 -- html-inline-css-plugin
## 静态资源集中输出 copy-webpack-plugins
```js
new CopyWebpackPlugin({
patterns: [{ from: path.resolve(__dirname, ‘public‘), to: path.resolve(__dirname, ‘dist‘) }],
}),
```
