webpack搭建react脚手架

初始化目录结构

├── config # webpack 配置
├── public
│ ├── index.html # index.html 入口
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 通用组件
│ ├── pages # 业务页面入口和常用模板
│ │ ├── components # 业务通用组件
│ │ ├── index.js # 业务页面
│ │ ├── service.js # 接口服务
│ │ └── store.js # mobx 状态管理
│ ├── routers # 全局路由
│ ├── services # 后台接口服务
│ ├── stores # 全局 Store
│ ├── utils # 工具库
│ ├── app.css # 全局样式
│ ├── app.js # 全局 JS
│ └── index.js # webpack 入口文件
├── README.md
└── package.json

webpack 4.x 安装

1、 npm init 创建 package.json

2、 npm install --D webpack webpack-dev-server webpack-cli

3、config 目录下新建 webpack.config.js

4、引入 react 框架 npm install -S react react-dom

5、public 目录下配置 html 模板，src 目录下配置入口文件

6、安装插件：npm install -D html-webpack-plugin， 并在 webpack 中配置 HtmlWebpackPlugin

安装，配置 babel,项目目录创建.babelrc

npm install -D @babel/core @babel/preset-env @babel/preset-react

npm install -D @babel/plugin-transform-runtime @babel/runtime @babel/runtime-corejs2

npm i @babel/polyfill

@babel/core babelbabel 的核心库

@babel/preset-env 把 es6,es7 语法转换成 es5。bebel7 以上的版本只用这一个预设包就可以实现语法的转换，已经废弃了 preset-stage-0，preset-stage-1，preset-stage-2 等这些包。但是这个包还不能转换 es6，es7 的一些新特性比如 Array.includes()，这就需要我们使用@babel/plugin-transform-runtime 了

@babel/preset-react 把 react 语法转换为 es5

@babel/plugin-transform-runtime 支持一些 es6，es7 的新语法

安装 配置 loaders

##安装 配置 loaders，在 webpack.config.js 添加打包编译构建规则,在 module 下添加 rules 属性

npm install -D babel-loader 使用 babel 进行编译项目

npm install -D style-loader css-loader 编译 css 文件

npm install -D url-loader file-loader 引入文件路径（图片，字体）

npm install -D less less-loader 识别 less 文件

区分开发环境和生产环境

webpack.base.config.js ， webpack.dev.config.js ， webpack.prod.config.js

npm install -D webpack-merge

源码：react脚手架