前端环境搭建（react）

1.执行 npm init

生成package.json文件，并将scripts中修改为：

"scripts": {

    "start": "webpack --watch",

    "server": "webpack-dev-server --hot --inline --history-api-fallback"

  },

2.安装相应的依赖

  npm install babel-cli babel-core --save-dev

  npm install react react-dom --save-dev

  npm install webpack webpack-dev-server webpack-cli --save-dev

  npm install css-loader babel-loader@7 style-loader --save-dev

  npm install babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

3.创建配置文件webpack.config.js与.babelrc

      webpack.config.js:

      module.exports = {

    entry: './main.js',

    output: {

        filename: './bundle.js'

    },

    module: {

        rules: [

            {

                test: /\.jsx?$/,

                exclude: /node_modules/,

                loader: 'babel-loader'

            }, {

                test: /\.css$/,

                exclude: /node_modules/,

                loader: 'style!css'

            }

        ]

    },

    devtool: 'cheap-source-map',

}

.babelrc:

{

  "presets": ["es2015","react",'stage-0']

}

4.执行 npm run server