用Webpack和Babel搭建React应用

第一种 使用脚手架工程Create React App
Create React App基于最佳实践，将Webpack、Babel、ESlint等工具的配置做了封装，使用时无需进行配置工作，可以专注于开发
1.安装： 肯定要先安装node和npm，然后安装create-react-app到系统全局环境，（方便在任意路径使用）
npm install -g create-react-app
2.创建应用
create-react-app my-app
这样就会在当前路径下创建一个my-app的React应用
3.运行项目
cd my-app
npm start

目录结构大概长这样
其中 node_modules文件夹是安装的所有依赖模块；package.json定义了项目的基本信息，如项目名称、版本号、在该项目下可执行的命令以及项目依赖的模块等；public下的index.html是应用入口页面；src是项目源码，index.js是代码入口

第二种 自己使用Webpack和Babel等搭建React应用

npm init -y //快速创立一个包管理配置文件

新建目录src 源代码目录 和 dist产品目录
在src下创建一个index.html和index.js

npm install webpack  webpack-cli -D //安装webpack 4.x版本需要cli（脚手架）

webpack.config.js //新建配置文件
	module.exports= {
		mode：'development', //或production 4.x新增的mode为必选项
		//4.x约定大于配置，默认打包入口src-->index.js，打包输出文件是dist中main.js，就不需要配置entry
		}

  //配置实时打包
  		npm install webpack-dev-server -D
  		 修改package.json -->scripts -->添加 "dev" : "webpack-dev-server"
  		 npm run dev  //实时打包
  		 index.html 引入<script src="/main.js"></script>
  	 修改"dev":"webpack-dev-server --open --port 3000  --hot  --progress --compress --host 127.0.0.1" //打包后打开默认浏览器 指定域名端口号 进度 压缩

//将index.html也托管于浏览器内存中
npm install html-webpack-plugin -D 加载插件
在webpack.config.js中
  const Path = require('path')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const htmlWebpackPlugin = new HtmlWebpackPlugin({
       template: Path.join(__dirname,'./src/index.html'),//源文件
      filename: 'index.html'//生成的内存中首页的名称
     })
     
//在module中添加
    plugin:[
    	htmlPlugin
    ]
    //webpack就配完了

//配置babel
//安装插件
npm install babel-core babel-loader babel-plugin-transform-runtime -D
npm install babel-preset-env babel-preset-stage-0 -D
//安装能够识别jsx语法的包
npm abel-preset-react -D
//配置loader 在webpack.config.js-->module.exports中添加
module:{//所有第三方模块的处理规则
	rules:[
			{test:/\.js|jsx$/,use:'babel-loader',exclude:/node_modules/}
	]
}
//在根目录添加.babelrc文件
	{"preset":["env","stage-0","react"],
	"plugins":["transform-runtime"]}

//创建react应用
npm install react react-dom -S //安装包
//可以配置省略文件后缀名和@路径标识符，在webpack.config.js-->module.exports中与module平级添加
	resolve:{
	extensions:['.js','jsx','json'],
	alias:{
	'@':Path.join(__dirname, './src')
	} 
}

//配置css loader
npm install style-loader css-loader -D
npm install sass-loader node-loader -D
//在rules中添加
{test:/\.scss$/,use:['style-loader', 'css-loader?modules']} //将自定义样式表以.scss命名，方便模块化，第三方样式表就用.css不用被模块化(只针对类选择器和 id选择器)
{test:/\.css$/,use:['style-loader', 'css-loader']}
//可以自定义类名格式
//在rules的css-loader后添加
	{test:/\.scss$/,use:['style-loader','css-loader?modules&localIdentName=[path][name]-[local]-[hash:5]','sass-loader']}
	//[path]:样式表相对于项目根目录所在路径
	//[name]：样式表文件名称
	//[local]:样式的类名定义名称
	//[hash:length]:表示32位的hash值
//在样式表中可以使用：local或：global +（类名）来设置该类是否被模块化

//使用bootstrap
npm install bootstrap@版本号 -S
npm install url-loader file-loader -D
//在rules中添加
{test:/\.ttf|woff|soff2|eot|svg$/,use:'url-loader'}