webpack构建react项目--理论篇

用构建工具webpack构建react项目的原因：

一、主要是react组件的特点

1. 所有组件都写在一个js文件里面，不好维护，写多个js去引入也无法识别；

2. 通过browser.js将jsx转换成js ，性能慢；

二、还有就是webpack自身特点

1. webpack是facebook为react量身打造的构建工具

2. webpack主要作用是实现模块化，代码整合，代码分割的作用

3. 使用webpack整合以后  也不需要使用browser进行将jsx转成js了

4. webpack工具里面有babel加载器可以将jsx语言转换成浏览器识别的语言

注：模块化-------

• 模块指的是一组具有同等属性和功能的集合叫做模块和类的概念相似
• react模块化指的是一个js中存放一个或多个组件，这些组件通过commonjs规范对外提供接口
• 在其他组件当中可以调用这些对外提供成接口的组件

webpack构建react项目步骤：

1. 全局安装webpack     npm  i  webpack  -g
2. 构建项目    初始化生成package.json     npm init
3. 安装自动化构建环境   webpack4.0以上需要    依赖安装npm i webpack     webpack-cli     webpack-dev-server -D
4. 构建项目目录:  组件  视图     样式    静态资源   数据仓库   字体    主文件         入口js   打包配置文件等  如：components,css,img,icon      index.html     main.js       webpack.config.js
5. 代码编辑   react    react-dom 默认安装的是16的版本，需要15的话，@15的就可以了
6. 模块整合  babel  加载器安装
7. 打包  运行  webpack webpack-dev-server
8. 其他加载器style-loader、url-loader等的安装，配置​​​​​​​

注：没有配置文件，入口打包成出口，执行命令是：webpack main.js output.js；​​​​​​​ 

       有配置文件的话------直接用webpack命令打包
       因为webpack有更新，babel-core 6的版本应该匹配babel-loader 7的版本，匹配不了8的版本，所以注意报错。

          

​​​​​​​