前言

其实很早之前就想要好好学习一下搭建整个脚手架和前端，但是鉴于各种奇怪的原因，始终没能这么做。今天就来这里参考了好几个教程和文档来学习一下怎么从头开始搭建 React 和 Webpack 的前端开发。

参考

React入门看这篇就够了

从零开始学 ReactJS（ReactJS 101)

搭建

首先 React.js 还有 Webpack.js 的具体用途就不解释了呢，我们直接到搭建的部分。

React 安装

React 本身最基础的核心只有两个 react 和 react-dom 这两个包。

所以运行：

yarn add react react-dom

就可以安装这两个我们最需要的东西了。但是因为 React 是用了 JSX，所以我们还需要 Babel 来转译 JSX 为浏览器可以阅读的 Javascript 代码和 ReactDOM 能处理的 DOM 信息。

Babel 安装

所以我们还需要：@babel/core, @babel/preset-env, @babel/preset-react, babel-eslint, babel-loader, babel-preset-es2015，作为 Babel 的组件来安装进来，运行：

yarn add @babel/core @babel/preset-env @babel/preset-react babel-eslint babel-loader babel-preset-es2015 -D

记得添加后面的 -D 参数，将这些保存为我们作为开发环境的依赖包，而不是主要项目的依赖包。

然后接下来就是 Webpack 了。

Webpack 安装

首先为了能够执行 webpack 我们要先全局安装一次 webpack-cli 才行，所以运行：

yarn global add webpack-cli

然后就是安装 webpack 的其他开发环境的依赖包，有这些：html-webpack-plugin, webpack, webpack-cli, webpack-dev-server

那么我们接下来直接运行：

yarn add html-webpack-plugin webpack webpack-cli webpack-dev-server -D

就可以安装好我们必备的所有的东西了。

配置

配置分为两个部分，一个是 babel 的配置，一个是 webpack 的配置。

我们以下面这个模式为例：

├─app
    ├─index.js
    ├─index.html
├─node_modules
├─.babelrc
├─package.json
├─webpack.config.js
└─yarn.lock

配置 Babel

我们先在根目录下新建一个文件，名叫 .babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": []
}

在里面填入这样的内容。其中，presets 第一个是引入了我们安装的 @babel/preset-env，第二个引入了我们 React 需要的 @babel/preset-react。

配置 Webpack

我们在依然在根目录下新建文件，名字就是 webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin")

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: `${__dirname}/app/index.html`,
    filename: 'index.html',
    inject: 'body'
})

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: `${__dirname}/dist`,
        filename: 'index_bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    devServer: {
        inline: true,
        // 这个端口自行选择自己喜欢的就好
        port: 4200
    },
    plugins: [HTMLWebpackPluginConfig]
}

在里面填入这样的内容。

前端服务渲染

webpack 的命令有很多参数，也有很多可以选择的内容：

webpack：会在开发模式下开始一次性的建置

webpack -p：会建置 production 的程式码

webpack --watch：会监听程式码的修改，当储存时有异动时会更新档案

webpack -d：加入 source maps 档案

webpack --progress --colors：加上处理进度与颜色

参考自：https://wizardforcel.gitbooks.io/reactjs101/Ch02/webpack-dev-enviroment.html

我们可以在 package.json 文件中添加这样的参数：

"scripts": {
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"
}

这样的话，以后运行 yarn dev 或者是 npm run dev 就可以省去我们输入很多参数和命令了。

React 文件

我们在根目录新建目录app，然后放入两个文件 index.html, index.js

在index.html文件中我们写入

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>React Setup</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>
        <!-- 这个 id 就是之后在 index.js 中会用到的东西 -->
        <div id="app"></div>
    </body>
</html>

在 index.js 文件中我们写入

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

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {

        }

    }

    render() {
        return (
            <div>
                <h1>Hello, React!</h1>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

结尾

现在运行

yarn dev

打开测试界面就能看到你的内容啦~

引用，参考，纠错

Doc - Webpack 起步

Doc - Webpack Loaders

Doc - Babel Preset Options List

GitHub Issue - Ch02 .1 webpack.config.js不全，npm run dev跑不起来

GitHub Issue - Module build failed (from ./node_modules/babel-loader/lib/index.js)

GitHub Issue - Plugin/Preset files are not allowed to export objects, only functions

StackOverflow - Preset files are not allowed to export objects

React to Webpack 手记

2020-06-02
Guide