React + webpack 快速搭建开发环境

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

{    "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文件，里面配置对应代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

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文件，文件代码如下：

1 2 3 4 5 6 7 8 9 10 11 12

<! 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的文件，代码如下：

1 2 3 4 5 6 7

import  React from  'react' ; import  ReactDOM from  'react-dom' ;   ReactDOM.render(    <h1>Hello, world!</h1>,    document.getElementById( 'content' ) );

文件代码目录如下：

全部执行配置完毕之后，运行命令：npm run dev，打开浏览器输入http://localhost:8080/就可以运行你的代码了。

配置的过程中可能因为版本等问题不能正常执行，可回退到对应的稳定版本。good luck~