从0到1基于Webpack的React项目搭建

刚参与了一个从头开始搭建的项目，整理一下前端从0到1搭建的基于webpack的react项目实践。（不用脚手架的那种哦）

创建一个新的文件夹以项目名命名

mkdir xiaoming
cd xiaoming

添加 package.json

npm init

在你的项目目录文件下运行 npm init, 结果如下图

npm init

按照提示输入（一般情况都是回车处理）后输入yes就会生成package.json文件了。package.json 是项目的核心文件，包含包依赖管理和脚本任务。

现在你的项目长这个样子

xiaoming
└ package.json

使用自己喜欢的编辑器打开当前repo查看生成的package.json文件

安装依赖包

按照我们的标题来看至少有两个最基本的依赖需要安装：react和webpack。

安装react

安装react, 还需要安装react-dom，react 从 0.14 版本开始，将 react-dom 拆分出 react 包，所以现在需要单独安装。

npm i --save react react-dom

安装webpack

这里 webpack-cli 作为一个命令行工具，接收一些参数并用于 webpack 的编译器，webpack-dev-server 是一个基于 express 的开发服务器，还提供了 live reloading 的功能，在开发的时候使用它配置热加载。

npm i --save-dev webpack webpack-cli webpack-dev-server

在命令行运行上面两条命令后，package.json发生了变化。多了dependencies和devDependencies。之后你安装的所有依赖的名字和版本号都会出现在这个里面，便于管理。

package.json

安装babel

通常我们在写应用的时候，都会用到es6/7/8和jsx的一些语法，所以我们需要能够编译这些语法，就需要引入插件

npm i --save-dev babel-core babel-loader html-webpack-plugin

babel 插件是为了让 webpack 能够使用 babel 编译 es6/7/8 和 jsx 的语法，而 html-webpack-plugin 会生成一个 html 文件，它的内容自动引入了 webpack 产出的 bundle 文件。

现在你的项目长这个样子

xiaoming
└ node_modules
└ package.json
└ package-lock.json

配置 webpack

首先你需要一个webpack.config.js，包含了你的webpack所有配置

在repo下新建webpack.config.js
copy如下代码进webpack.config.js（关于webpack的配置网上一搜一大把，不赘述）

const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
// 以哪个模块为入口
    index_bundle: './src/index.js',
  },
  output: {
// 打包好的文件存放在哪里，以及怎么命名
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
  },
  module: {
// 使用 babel-loader 编译 es6/7/8 和 jsx 语法
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    // 指定自己的 html 文件模板，也可以指定生成的 html 的文件名
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html',
      favicon: './src/favicon.ico',
    }),
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          enforce: true,
          chunks: 'all'
        }
      }
    }
  }
};

现在你的项目长这个样子

xiaoming
└ node_modules
└ package.json
└ package-lock.json
└ webpack.config.js

看起来差不多了，现在来写react的hello world好了

新建src文件夹
在src中新建App.js, index.html, index.js文件(参见react官网hello world代码部分)

xiaoming
└ node_modules
└ src
  └ App.js
  └ index.html
  └ index.js
└ babel.config.js
└ package.json
└ package-lock.json
└ webpack.config.js

将package.json中的scripts添加一条命令：

"scripts": {
    "start": "webpack-dev-server --config webpack.config.js --open"
  },

下图是我完整的package.json文件，仅供参考

{
  "name": "xiaoming",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --open"
  },
  "author": "xueying",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "redux": "^4.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-env": "^7.5.5",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  }
}

babel.config.js

module.exports = {
  'presets': ['@babel/react','@babel/env'],
};

App.js

import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <div className='app'>
        <h1>Hello world</h1>
      </div>
    );
  }
}

export default App;

index.html

<!doctype html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Welcome to Xiaoming hotpot</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

index.js

import React from 'react';
import {hydrate} from 'react-dom';
import App from './App';

hydrate(<App/>, document.getElementById('app'));

命令行运行npm run start就可以启动你的demo，可以在浏览器中看见hello world了。

hello world

周末闲来无事加上了前端项目docker化，让其拿到repo后先执行repo里的startLocal脚本启动docker，再在docker里运行npm install等相关命令。目的主要是为了团队协作时防止每个人本地node版本不一致，install时改来改去，破坏环境。

创建docker-compose.yml

version: '2'
services:
    nginx:
        container_name: nginx
        image: nginx:1.16.1-alpine
        ports:
            - '8080:8080'
        volumes:
            - ./nginx.conf:/etc/nginx/conf.d/default.conf

    frontend:
        container_name: frontend
        image: node:10
        ports:
            - '3000:3000'
        volumes:
            - ./node_modules:/work/node_modules
            - ./:/work
        working_dir: '/work'
        command: ["bash"]
        stdin_open: true
        tty: true

创建nginx.conf

server {
    listen       8080;
    charset utf-8;
    server_name  0.0.0.0;

    location / {
        proxy_pass   http://frontend:3000;
        proxy_set_header Host $host;
    }

    location /api {
        proxy_pass   http://你的后端host/;
    }
}

创建本地一键启动脚本 ./startLocal.sh

#!/usr/bin/env bash
docker-compose -f ./docker-compose.yml -p . up -d
docker exec -it frontend /bin/bash
docker-compose -f ./docker-compose.yml -p .  down

一键启动步骤

git clone git@github.com:lixueying/react-with-webpack.git
cd react-with-webpack
./startLocal.sh
npm install （只在第一次进入docker或者依赖有更新的时候使用）
npm start

repo下载之后就可以直接用了，不需要自己再去搭架子，开箱即用。

附上React简易脚手架的GitHub地址：https://github.com/lixueying/react-with-webpack