001-react---手动环境配置

注意：工具使用：node、webpack
项目的使用用到了node，在开始之前要确保你是否已经安装了node。并检测弄得版本、npm版本是否符合开发的要求。
it’s show time!

1. 新建文件夹，npm init初始化，生成package.json文件。
   注意：若npm安装慢可以使用一下命令来安装cnpm：
   npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 安装各种依赖
   2.1、npm install --save react - 安装React。
   2.2、npm install --save react-dom 安装React Dom,这个包是用来处理virtual DOM。这里提一下用React Native的话，这里就是安装react-native。
   2.3、npm install -g webpack 全局安装webpack
   2.4、npm install --save webpack - 安装Webpack, 现在最流行的模块打包工具。
   2.5、npm install --save webpack-dev-server - webpack官网出的一个小型express服务器，主要特性是支持热加载。
   2.6、npm install --save babel-core - 安装Babel, 可以把ES6转换为ES5，注意Babel最新的V6版本分为babel-cli和babel-core两个模块，在此只安装了babel-core。
   ** npm install -g webpack@4.19.1 --save** 安装固定版本的依赖包

	以下命令根据实际需求进行安装
	2.5.1、npm install --save babel-loader   webpack中需要用到的loader。
	2.5.2、npm install --save babel-preset-es2015 预设ES5插件
	2.5.3、npm install --save babel-preset-react JSX创建。（常用）

3、package.json中配置webpack
	3.1、
	"scripts": {
		 "start": "webpack-dev-server --hot --inline --colors --content-base ./build",
		 "build": "webpack --progress --colors"
	}
	3.2、npm start开启webpack-dev-server。
		 npm build 将进行生产环境打包。
4、启动webpack打包工具

	var webpack = require('webpack');
	var path = require('path');
	module.exports = {
	// 基础目录的绝对路径，用以解决入口问价和加载点的解决
	 context: __dirname + '/src',
	 // 入口文件
	 entry: './src/app.js',
	 // 打包之后生成的文件名
	 output: {
	     path: __dirname + '/build',
	     filename: "bundle.js"
	 },
	 // 模块处理
	 module: {
	     rules: [{
	         test: /\.js$/,
	         exclude: /node_modules/,
	         loader: 'babel-loader',
	         query: {
	             plugins: ['transform-runtime'],
	             presets: ['es2015', 'react', 'stage-2']
	         }
	     }, {
	         test: /\.css$/,
	         loader: "style-loader!css-loader"
	     }]
	 }
	};

webpack打包工具有很多便捷的特性，尤其是hot reloading。上面是webpack.config.js文件。随着不断的变化，配置文件也会不断的更新。若文件名字发生改变，则package.json中build的内容要改为‘webpack.config.js --progress --colors’

文档参考： https://webpack.js.org/configuration/module/#rule-loader

温馨提示：扫码可以提问、交流。本人有各个行业的小程序前端代码，如有需要也可以扫码留言哦。