環(huán)境準(zhǔn)備

1.安裝nodejs、npm
訪問網(wǎng)站http://nodejs.cn/download/下載需要的版本的nodejs

image.png

下載后直接點擊安裝，然后cmd執(zhí)行node -v和npm -v

出現(xiàn)上圖內(nèi)容則安裝完成，如果沒有需要配置環(huán)境變量（一般都會自動配置環(huán)境變量的）

2.創(chuàng)建react工程目錄
創(chuàng)建react_demo的文件目錄，并創(chuàng)建文件如下：

package.json：

{
  "name": "react_demo",
  "version": "0.0.1",
  "description": "",
  "main": "",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server --hot --inline --host 0.0.0.0 --port 8080"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.2.1",
    "babel-loader": "^6.2.5",
    "babel-plugin-import": "^1.1.1",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-import-resolver-webpack": "^0.8.1",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.3",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^1.16.2"
  }
}

webpack.config.js

const path = require('path')
var webpack = require('webpack');
const root = __dirname;

module.exports = {
    // 入口文件
    entry: path.resolve(root, 'src/index.jsx'),
    // 出口文件
    output: {
        filename: 'bundle.js',
        path: path.resolve(root, 'build')
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'] //webpack2.x extensions[0]不能為空
    },
    devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        progress: true,
        disableHostCheck: true
    },
    module: {
        loaders: [
            {
                test: /(\.js|\.jsx)$/,
                loaders: [
                    'babel-loader'
                ],
                exclude: /node_modules/,
            }
        ],
    }
}

.babelrc

{
  "presets" : [ "react", "es2015"]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React Demo</title>
</head>
<body>
<div id="app"></div>
<script src="build/bundle.js"></script>
</body>
</html>

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './components/Root';

ReactDOM.render(
    <Root />,
    document.getElementById('root')
);

Root.jsx

import React from 'react';

class Root extends React.PureComponent{
    render() {
        return (
            <h1> Hello World!</h1>
        );
    }
}

export default Root;

執(zhí)行配置

執(zhí)行依賴包安裝
在項目根目錄下，執(zhí)行npm install：

執(zhí)行后的文件目錄，生成node_modules目錄和package-lock.json文件：
執(zhí)行webpack配置
在項目根目錄下，執(zhí)行npm run build：

執(zhí)行后的文件目錄，生成build目錄，build目錄下生成bundle.js文件：