React环境配置（第一个React项目）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

使用Webpack构建React项目

1. 使用NPM配置React环境

NPM及React安装自行百度

1. 首先创建一个文件夹，the_first_React
2. 进入到创建好的目录，npm init，然后一路回车
3. 新建src目录，在src中新建js文件夹，并在js中新建index.js文件
4. npm install --save react react-dom babelify babel-preset-react
5. npm install babel-preset-es2015 --save 安装一些依赖包

2. webpack热加载配置

1. 新建webpack.config.js文件（注意：webpack2以后，loaders改为rules）

   var webpack = require('webpack');
   var path = require('path');module.exports = {
   mode: 'production',
   entry: './src/js/index.js',
   output: {
   path:path.resolve(__dirname),
   filename: 'bundle.js'
   },
   module:{
   rules:[{
   test: /\.js?$/,
   exclude: /(node_modules)/,
   loader: 'babel-loader',
   query: {
   presets: ['react', 'es2015']
   }
   },
   {
   test: /\.css$/,
   //CSS模块化用注释部分
   // loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
   //Ant Design 样式用一下部分
   loader: "style-loader!css-loader"
   },
   //配置less
   {
   test: /\.less$/,
   loader: "style-loader!css-loader!less-loader"
   }]
   },
   };

2. 安装 webpack 。npm install -g webpack
3. 全局安装webpack-dev-server。 npm install -g webpack-dev-server
4. 项目中安装 webpack-dev-server。npm install webpack-dev-server --save
5. 项目中安装webpack。 npm install webpack --save
6. 项目中安装babel-loader。npm install babel-loader --save
7. 项目中安装 babel-core。npm install babel-core --save
8. 安装完所有的包后，可以查看项目中自动生成的package.json文件，查看是否安装成功。
9. Terminal输入 webpack,生成bundle.js文件，将index.js进行打包。
10. 在html文件中引入bundle.js即可
11. 配置package.json文件，添加start和build两行

    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
    },

12. 使用npm start，即可 自动刷新bundle.js，同时可以自动打开locahost:8080。当修改index.js文件时，页面会自动进行刷新

好了，到此为止，你已经用webpack构建了自己的第一个React项目啦

使用脚手架构建React项目

当然你也可以使用脚手架工具进行React项目的构建，直接npm

1. 安装脚手架工具。npm install -g create-react-app
2. create-react-app my-app
3. cd my-app/
4. npm start

好了，使用脚手架已经构建完毕了，是不是超级简单