React + webpack 快速搭建开发环境_react script build:webpack -- process --colors-优快云博客

转自：https://www.cnblogs.com/marymei0107/p/6118524.html 最后需要 npm install 一下

因网上大多React + webpack快速搭建的运行不起来，便自行写了一个。在搭建开发环境的前需安装nodejs，npm。

新建一个工作目录，比如叫reactdome，在reactdome目录中运行命令npm init；这里可以全部按enter执行，直到执行完毕，执行完毕后将会自动生成package.json文件。在package.json文件中配置如下代码：

{

  "name": "",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts":
 {

    "dev": "webpack-dev-server
 --hot --progress --colors",

    "build": "webpack
 --progress --colors"

  },

  "author": "",

  "license": "ISC",

  "devDependencies":
 {

    "babel-core": "^6.0.20",

    "babel-loader": "^6.0.1",

    "babel-preset-es2015": "^6.0.15",

    "babel-preset-react": "^6.0.15",

    "css-loader": "^0.25.0",

    "react": "^15.3.2",

    "react-css-modules": "^4.0.3",

    "react-dom": "^15.4.0",

    "react-router": "^3.0.0",

    "style-loader": "^0.13.1",

    "webpack": "^1.13.3",

    "webpack-dev-server": "^1.16.2"

  }

}

里面的文件都是必须的，后期需要其他的可自行添加安装更多。

package.json文件配置完毕，执行npm install命令即可（我有FQ，如果安装有问题可自行百度找阿里镜像安装npm）。

在reactdome文件夹中新建webpack.config.js文件，里面配置对应代码

var path
 = require('path');

var webpack
 = require('webpack');

 

module.exports
 = {

    entry:
 [

        'webpack/hot/dev-server',

        path.resolve(__dirname, './app/index.js')

    ],

    output:
 {

        path:
 path.resolve(__dirname, './build'),

        filename: 'bundle.js',

    },

  module:
 {

    loaders:
 [

      {

        test:
 /\.jsx?$/,

        loader: 'babel-loader',

        exclude:
 /node_modules/,

        query:
 {presets: ['es2015', 'react']
 }

      }

    ]

  },

  resolve:
 {

    extensions:
 ['','.js', '.jsx'],

  }

};

在reactdome文件里面新建一个index.htm文件，文件代码如下：

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport"
 content="width=device-width,initial-scale=1">

    <title>reactdome</title>

  </head>

  <body>

    <div id="content"></div>

    <script src="bundle.js"></script>

  </body>

</html>

在reactdome文件里面新建一个app文件夹，app文件夹中新建一个index.js的文件，代码如下：

import React
 from 'react';

import ReactDOM
 from 'react-dom';

ReactDOM.render(

  <h1>Hello,
 world!</h1>,

  document.getElementById('content')

);