手动配置react环境教程

1.创建一个项目文件夹

2.打开命令行，并进入项目文件夹。

3.执行npm init -y初始化一个package.json文件，记录项目所需的依赖。

4.然后在命令行输入以下命令来安装项目所需依赖。

npm install webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react css-loader style-loader file-loader url-loader html-webpack-plugin -D

npm install react react-dom bootstrap -S

webpack 【项目打包工具】

webpack-dev-server 【webpack提供的启动后台服务的工具】

babel-core 【babel核心工具】

babel-loader 【转译js文件的工具】

babel-preset-es2015 【转译es6】

babel-preset-stage-0 【转译es7】

babel-preset-react 【转译react】

css-loader 【转译css】

style-loader 【将转译的css，以内嵌式的方式插入HTML文件】

file-loader 【转译图片】

url-loader 【处理路径】

http-webpack-plugin 【编辑html文件】

-D 【安装在开发环境】

react 【。。。不介绍】

react-dom 【。。。也不说了】

bootstrap 【框架，只用来写css】

-S 【安装在生产环境】

项目文件夹内容：
           项目-|
               |-node_modules
               |-package.json

5.如果命令行特别牛逼，就用命令行操作以下操作就好。

不然就跟我一起用代码编辑器打开项目文件(我用webstorm).

5.1 项目目录下创建src文件夹，然后在src下建立index.js(打包的入口文件)。

5.2 项目目录下创建html文件，作为编译html文件的模板。

5.3 项目目录下建立webpack.config.js文件。(名字一点不能错)

let path = require('path');
let htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve('build'),
        filename:'bundle.js'
    },
    module:{
        rules:[
                {test:/\.js$/,loader:'bebal-loader',exclude:/node_modules/,query:{preset:['es2015','stage-0','react']}},
                {test:/\.css$/,loader:['style-loader','css-loader']},
                {test:/\.(jpg|png|gif|eot|svg|woff|woff2|ttf)$/,loader:'url-loader'}
        ]
    },
    plugins:[
        new htmlWebpackPlugin ({
            template:'./index.html'
        })
    ]
}

6.配置启动命令

6.1 找到并打开package.json文件。

6.2 找到scripts。

6.3 在scripts中写入以下代码：

     "dev":"webpack-dev-server --open",
     "build":"webpack -p"

当在命令行项目文件下执行 npm run dev 后，会启动一个服务，并自动打开浏览器。

当在命令行项目文件下执行npm run build后，会打包文件，打包后的文件在，build文件夹下。

然后就可以用react写项目了。