前言
前面一节介绍了webpack的核心内容，当然webpack的核心不止我说的那些。有了前面的基础就了解了webpack是做什么的，如何配置webpack，怎么初始化一个前端项目。
这节就进入到前端项目的打包，这里使用的是react框架；
学习目标
- webpack 配置 react 前端项目
- 在浏览器中启动项目
什么是 JSX
在日常的 React 开发工作中，我们已经习惯了使用 JSX 来描述 React 的组件内容。关于JSX React 官网给出的定义：
JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。
所以 JSX 只是 JavaScript 的一种语法扩展 并不是JavaScript 也不是JavaScript的'某个版本'。所以浏览器并不会像天然支持 JavaScript 一样地支持 JSX。所以，配置react项目，其最重要的就是要把react中JSX语法在浏览器中能够生效。因此Babel就充当了编辑JSX的角色。Babel 介入
Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
1.引入相关依赖
npm install --save-dev babel-loader @babel/core
2.配置webpack
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
到这里已经配置完js 文件使用babel进行打包，babel-loader的作用是加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。
3.babelrc
这里的内容就是loader 配置中options字段内容，使用到了env preset(@babel/preset-env)。可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。
# 安装
npm install @babel/preset-env --save-dev
# 安装之后在.babelrc 文件添加如下配置
{
"presets": ["@babel/preset-env"]
}
# 配置同样可以写在 loader 中，如下
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
4.编辑 JSX
这是最关键的一步了，如果想要浏览器支持代码中的JSX语法，还需要对代码进行编译。这里用到的是@babel/preset-react，能够将jsx 语法编译成 ES5。
# 安装
npm install --save-dev @babel/preset-react
# 写入配置
{
"presets": ["@babel/preset-react"]
}
关于babel 更多的内容，可以在babel 官网查看，这节主要目的是能够运行起来react 项目
5.测试react项目
修改上节的文件为react文件，
# ./src/index
import React from 'react';
import ReactDom from "react-dom"
import App from './pages/App'
ReactDom.render(<App />, document.getElementById("root"))
# ./src/pages/App.js
import React from "react"
const dataSource = [1, 2, 3, 4, 5]
export default () => (
<div>
this is App Page;
{
dataSource.map(item => item)
}
</div>
)
运行项目跑一下吧！！！
webpack-dev-server
根据上面的配置就能够把react项目运行起来，在浏览器也能看到效果了，但是启动项目还是需要我们先进行打包，然后双击dist 文件夹里面的index.html进行静态文件查看，这种效果在实际的项目开发中是不能够忍受的，所以在webpack里面需要配置一个本地服务，能够根据本地文件的修改时时的在页面作出相应。需要一下配置
devServer
可用于快速开发应用程序
devServer: {
contentBase: path.join(__dirname, 'dist'),# 告诉服务器从哪里提供内容
hot: true, # 是否热部署，
port: 9000,# 启动服务端口
open: true # 是的每次启动后自动打开浏览器
},
webpack-dev-server
# 安装
npm install webpack-dev-server --save-dev
# 使用, 在package.json 中添加如下配置
"scripts": {
"start": "webpack-dev-server",
},
# 运行 就会在浏览器中打开一个 localhost:9000的网页地址
yarn start
作者：编程琐事
