# 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‘) }],

}),

```