yarn是一个和npm类似的包管理工具
首先来到项目目录
在git cmd中执行
yarn add react react-dom webpack
react react-dom 是reactjs的核心库
接下来用webstorm打开项目目录
创建源码目录src 里面创建js和pages文件夹分别用来存放js脚本文件和html文件
首先介绍一个webpack插件
html-webpack-plugin可以对我们的html模板进行生成并输出 同时按照文件夹层级结构自动引入所依赖的js文件
首先安装html-webpack-plugin可以再github上查找webpack各种插件
安装yarn add html-webpack-plugin
接下来创建webpack配置文件 使用webpack对项目进行构建
webpack默认配置文件是webpack.config.js
在项目根目录下创建webpack.config.js
里面是js脚本 在项目编译时 会自动调用该文件 并通过require的方式直接变成模块加载到内核中读取配置
最简单配置如下
image.png
项目目录如下
image.png
接下来在package.json中加入scripts代码片段（就可以在cmd窗口中执行命令编译代码）
image.png
接下来在cmd中执行yarn run build
image.png
然后在build文件夹中出现了webindex.js生成的文件
image.png
这是一个webpack打包后的文件
我们可以发现现在它并没有什么用处 因为我们的模板文件并没有被打包
接下来需要配置html-webpack-plugin插件
image.png
再次执行yarn run build
image.png
image.png
可以发现自动对webindex.js进行了引入
浏览器运行弹出123 使我们在index.js中写的业务代码
image.png
接下来加入react核心库（并测试下简单的代码）
我们要明白 我们写代码时只需要改src里面的代码 不需要改build目录下的（自动生成的）
接下来在index.js中写入一段react测试代码
image.png
在index.html中写入
image.png
这样编译后会将虚拟dom渲染到root节点下
cmd中yarn run build
image.png
发现报错了
因为jsx代码无法识别
需要使用babel进行转换（还可以使用typescript进行处理）
来到babel官网http://babeljs.io/docs/en/babel-preset-react 加入react支持
yarn add babel-preset-react
官网告诉我们还需要创建个.babelrc文件
image.png
同时需要将react与webpack进行融合
需要装babel-loader babel-core这两个loader转换器才能运行
yarn add babel-loader babel-core
安装完后在webpack.config.js中进行（babel与react的jsx融合）
image.png
babel-loader会自动读取.babelrc配置进行编译
接下来在编译一下项目
yarn run build
image.png
编译成功了
这时build下面的webindex.js文件变得很大 因为我们把react.js核心库也打包进来了
等下会把核心库排除
运行build下的index.html
image.png
出现了hello world
接下来不打包react核心库
首先在index.html中引入cdn中react.js文件
image.png
接下来需要在构建时排除引入的react和react-dom
在webpack.config.js中加入如下配置
image.png
再次运行
yarn run build
浏览器运行index.html
image.png
右键检查下源码
image.png
引入了react的cdn地址
看下打包出来的webindex.js文件
image.png
小了很多
以上就是webpack结合react开发简单的配置过程
网友评论