build怎么调试 react_从零开始配置React全家桶

在熟练的使用各种脚手架工具生成项目的同时，你是否还记得项目最初的样子。本文将从零开始，带领大家搭建一个React全家桶系列的项目结构，在完成功能的同时，会讲解具体每一项的配置的含义以及延伸的知识点。如果你以后在项目配置中遇到什么问题，不妨回来看看，或许能找到答案。

前端工程化至上

目录

1. 版本说明
2. 目录结构
3. 初始化项目
4. webpack
5. react
6. 配置loader(sass,jsx)
7. 引入babel
8. 使用HtmlWebpackPlugin
9. 使用webpack-dev-server
10. 多入口页面配置
11. ref="http://www.imooc.com/article/details/id/291278#entry">如何理解entry point(bundle),chunk,module
12. 多入口页面html配置
13. redux
14. 使用react-router
15. 使用redux-thunk
16. 模块热替换（Hot Module Replacement）
17. 使用ESLint
18. 使用axios和async/await
19. Code Splitting
20. 使用CommonsChunkPlugin

版本说明

由于构建相关例如webpack，babel，react-router等更新的较快，所以本文档以下面各种模块的版本号为主，各位安装的时候需要注意一下或者可以直接执行npm i将模块都安装好。

"dependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-3": "^6.24.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-react": "^7.9.1",
    "file-loader": "^1.1.11",
    "history": "^4.7.2",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-hot-loader": "^4.3.12",
    "react-redux": "^6.0.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "redux": "^4.0.1",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.3",
    "webpack-dev-server": "^3.1.1"
}

目录结构

开发和发布版本的配置文件是分开的，多入口页面的目录结构。

react-family/
    |
    |──dist/                                    * 发布版本构建输出路径
    |
    |──dev/                                     * 调试版本构建输出路径
    |
    |──src/                                     * 工具函数
    |     |
    |     |—— component/                        * 各页面公用组件
    |     |
    |     |—— page/                             * 页面代码
    |     |      |—— index/                     * 页面代码
    |     |      |        |—— Main/             * 组件代码
    |     |      |        |       |—— Main.jsx  * 组件jsx
    |     |      |        |       |—— Main.scss * 组件css
    |     |      |
    |     |      |—— detail/                    * 页面代码
    |     |
    |     |—— static/                           * 静态文件js，css
    |
    |
    |──webpack.config.build.js                  * 发布版本使用的webpack配置文件
    |──webpack.config.dev.js                    * 调试版本使用的webpack配置文件
    |──.eslint                                  * eslint配置文件
    |__.babelrc                                 * babel配置文件

初始化项目

1. 创建文件夹

mkdir react-family-bucket

1. 初始化npm

cd react-family-bucket 
npm init

如果有特殊需要，可以填入自己的配置，一路回车下来，会生成一个package.json，里面是你项目的基本信息，后面的npm依赖安装也会配置在这里。

webpack

1. 安装webpack

npm install webpack --save
or
npm install webpack --g

--save是将当前webpack安装到react-family-bucket下的/node_modules。--g是将当前webpack安装到全局下面，可以在node的安装目录下找到全局的/node_modules。

1. 配置webopack配置文件

touch webpack.config.dev.js

新建一个app.js

touch app.js

写入基本的webpack配置，可以参考这里：

const path = require('path');
const srcRoot = './src';
module.exports = {

    // 输入配置
    entry: [
      './app.js'
    ],,

    // 输出配置
    output: {
        path: path.resolve(__dirname, './dev'),

        filename: 'bundle.min.js'
    },

};

3, 执行webpack命令
如果是全局安装：

webpack --config webpack.config.dev.js

如果是当前目录安装：

./node_modules/.bin/webpack --config webpack.config.dev.js

在package.json中添加执行命令：

  "scripts": {
    "dev": "./node_modules/.bin/webpack --config webpack.config.dev.js",
  },

执行npm run dev命令之后，会发现需要安装webpack-cli，（webpack4之后需要安装这个）

npm install webpack-cli --save

去除WARNING in configuration警告,在webpack.config.dev.js增加一个配置即可：

...
mode: 'development'
...

成功之后会在dev下面生成bundle.min.js代表正常。
如果想要动态监听文件变化需要在命令后面添加 --watch

react

1. 安装react

npm install react react-dom --save

1. 创建page目录和index页面文件：

mkdir src
mkdir page
cd page

创建index

mkdir index
cd index & touch index.js & touch index.html

index.js

import ReactDom from 'react-dom';
import Main from './Main/Main.jsx';

ReactDom.render(<Main />, document.getElementById('root'));

index.html

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

</head>
<body>
<div id="root"></div>
</body>
</html>

1. 创建Main组件

import React from 'react';

class Main extends React.Component {

    constructor(props) {
        super(props);

    }

    render() {

        return (<div>Main</div>);
    }
}

export default Main;

• export 和 export default区别：

export可以有多个

xx.js:
export const test1 = 'a'
export function test2() {}

yy.j