前言

前面一节介绍了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 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

引入相关依赖

npm install --save-dev babel-loader @babel/core

配置webpack

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

到这里已经配置完js 文件使用babel进行打包，babel-loader的作用是加载 ES2015+ 代码，然后使用 Babel 转译为 ES5。

.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']
        }
      } 
    }
  ]
}

编辑 JSX

这是最关键的一步了，如果想要浏览器支持代码中的JSX语法，还需要对代码进行编译。这里用到的是@babel/preset-react，能够将jsx 语法编译成 ES5。

# 安装
npm install --save-dev @babel/preset-react
# 写入配置
{
  "presets": ["@babel/preset-react"]
}

关于babel 更多的内容，可以在babel 官网查看，这节主要目的是能够运行起来react 项目

测试react项目

修改上节的文件为react文件，

# ./src/index
import React from 'react';
import ReactDom from "react-dom"
import App from './pages/App'


ReactDom.render(<App />, document.getElementById("root"))
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

WebPack基础入门(二)：React项目配置

推荐阅读

前言

什么是 JSX

Babel 介入

webpack-dev-server