初始化目录结构

├── 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脚手架

webpack搭建react脚手架相关推荐

Webpack搭建React开发环境
Webpack搭建React开发环境 1.React环境搭建实现React开发的三种方式: (1)使用CDN的方式 <script src="https://unpkg.com/re ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
react 引用本地js_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
react 文件 md5_从零配置webpack 4+react脚手架（二）
前言: 你可能也注意到了,html文件中的关于js的引用是我们手动写的,那假如我们改了输出路径或打包编译之后的文件名,那我们岂不是还要手动去修改html文件中的引用?我们怎么做到,像create-re ...
基于webpack4.X从零搭建React脚手架
项目初始化 $ npm init 复制代码安装webpack 本次创建是基于webpack4 $ npm install --save-dev 复制代码新建webpack配置文件在根目录创建bu ...
webpack搭建vue脚手架
之前搞过的webpack版本搭建vue脚手架项目,今天分享一下! 在读这篇文章之前你可能需要了解一些webpack的配置才行否则可能看不懂部分配置首先我们的项目的src目录结构如下基本上与vue ...
搭建react脚手架
1.打开cmd命令窗口(一定要注意自己是在哪个文件目录下输出命令的,方便好找文件)!cmd切换到桌面的命令cd Desktop(des+TAB键盘) 2.全局安装react脚手架仓库:npm inst ...
react打包后图片丢失_使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
基于webpack的react脚手架
一.前言:react的cli开发模式太过于简单,好多东西都要自己配置二.这里有个简单的配置,可以直接上手开发(不熟悉webpack和npm的绕路),已经完成的配置如下 1:默认ejs模板 2:编译l ...
使用webpack搭建react项目
初始化项目空间新建一个项目目录,在目录下执行:npm init -y 此时将会生成 package.json 文件之后新建 src.config(配置webpack)文件夹,新建index.htm ...

webpack搭建react脚手架

webpack搭建react脚手架

初始化目录结构

webpack 4.x 安装

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

安装配置 loaders

区分开发环境和生产环境

webpack搭建react脚手架相关推荐

最新文章

热门文章

webpack搭建react脚手架

webpack搭建react脚手架

初始化目录结构

webpack 4.x 安装

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

安装 配置 loaders

区分开发环境和生产环境

webpack搭建react脚手架相关推荐

最新文章

热门文章

安装配置 loaders