安装NPM和Node.js

NodeJS官网

安装完以后就会有最新版的Node.js和NPM

创建App目录

npm init

生成的package.json 里，** scripts** 最重要，这里定义的参数会在** npm run **的时候进行调用。

具体指南：阮一峰——npm scripts使用指南

 "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --devtool eval-source-map --progress --host 192.168.20.6 --colors --hot --content-base ./build --module-bind 'css=style!css' "
  },

• --host 192.168.20.6 ，用于 webpack server 时所用的地址
• --hot 热更新

安装webpack

app根目录下创建 webpack.config.js

npm  install webpack --save-dev
--save-dev 保存到当前文件夹

webpack作用

• 打包应用
• 打包压缩静态文件（css,jsx)
• 热更新

安装 webpack-dev-server 热更新服务器

详细看 webpack-dev-server 解读

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

它将在当前文件夹下启动一个websocket服务，端口号为8080

在package.json里我们只需要添加，这一段东西 （script有了，其实这一步没必要）

devServer: {
  port: 8080 //设置监听端口（默认的就是8080）
  contentBase: "./build",//本地服务器所加载的页面所在的目录
  colors: true,//终端中输出结果为彩色
  historyApiFallback: true,//不跳转，用于开发单页面应用，依赖于HTML5 history API 设置为true点击链接还是指向index.html
}

安装React最新版本

npm install --save-dev react react-dom

安装Babel

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2

专门用来热更新 React的react-hot-loader(最新版本)

github地址react-hot-loader

npm install --save react-hot-loader@next

最重要的：新建.babelrc并配置

// 新建.babelrc
{
  "presets": [
    ["es2015", {"modules": false}],
       // webpack现在已经支持原生的import语句了, 并且将其运用在tree-shaking特性上
    "stage-2",
      // 规定JS运用的语言规范层级
      // Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。
      // 详情查看 https://tc39.github.io/process-document/
    "react"
      // 转译React组件为JS代码
  ],
  "plugins": [
    "react-hot-loader/babel"
      // 开启react代码的模块热替换（HMR）
  ]
}

最终webpack.config.js配置

const { resolve } = require('path');
const webpack = require('webpack');
module.exports = {
    context: __dirname,
    entry: [
        'react-hot-loader/patch',
        'webpack/hot/only-dev-server',
        './app/main.js'
    ],
    output: {
        path: resolve(__dirname, 'build'),//打包后的文件存放的地方
        filename: "bundle.js",//打包后输出文件的文件名
        publicPath: "/"
    },
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        hot: true,
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
             {
                test: /\.css$/,
                use: [
                    'style-loader','css-loader'
                ],
                exclude: /node_modules/
            },
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
    ],
    devtool: "cheap-eval-source-map",
};

最终文件目录

最终的文件目录结构，以后可以写个python脚本自动配置环境，奶奶的气死老子

写main.js内容

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';

import Cpt from './component';

const render =  (Component) => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('div1')
  )
};
render(Cpt);

if(module.hot) {
  module.hot.accept( () => {
    render(Cpt)
  });
}

写component.js

import React from 'react';

const Cpt = () => (
  <div>
    <h1>我是盖世英雄！</h1>
  </div>
);
export default Cpt;

最后

npm run dev

笔记来源和总结

布蕾布蕾的webpack-react之webpack篇

• 写个脚本可以一件配置
• es6的react教程不多，不全，要看都看es6的。
• module.hot.accept()这个函数的api改了，只有一个参数，是一个function