从零到一搭建 react 项目系列之（二）

一、本项目使用 yarn 进行包管理

初始化项目，生成 package.json。

$ yarn init

// package.json
{
  "name": "webpack4_demo",
  "version": "1.0.0",
  "description": "从零到一搭建 react 项目",
  "main": "index.js",
  "repository": "git@github.com:toFrankie/webpack4_demo.git",
  "author": "Frankie <1426203851@qq.com>",
  "license": "MIT",
  "private": true
}

关于 yarn 常用命令，可以看下这篇文章【yarn 使用以及 npm 的迁移】。

二、修改项目目录

• assets：存放一些静态文件
• config：存放一些配置配置文件
• src：项目资源，并添加 index.js 作为项目入口文件

二、使用 webpack 作为打包工具

*本项目使用 webpack 4.x 版本。

1. 安装依赖包

注意，需要同时安装 webpack-cli。因为从 webpack 4.x 起，将原先存在于一个依赖包的拆分成 webpack 和 webpack-cli 两个依赖包。

In webpack 3, webpack itself and the CLI for it used to be in the same package, but in version 4, they've separated the two to manage each of them better.

$ yarn add webpack@4.41.2
$ yarn add webpack-cli@3.3.10

命令执行，依赖包会被放置在 node_modules 目录，同时生成 yarn.lock 锁文件（类似 npm v5 的 package-lock.json）。

与此同时，package.json 会发生变化。它记录了我们所安装的包以及对应包的版本号。

{
  "dependencies": {
    "webpack": "4.41.2",
    "webpack-cli": "3.3.10"
  }
}

2. webpack 配置

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，它仍然有着高度可配置性，可以很好满足你的需求。

在此之前版本，需要类似 webpack.config.js 配置文件才能打包。

它的默认入口文件是 src/index.js。

3. webpack 打包

我们可以在 package.json 添加 scripts 字段来配置 NPM 脚本。

"scripts": {
  "build": "webpack --progress --colors"
}

执行命令 yarn run build，我们看下会 webpack 会帮我做些什么工作?

它给我们生成了 main.js 文件，于 /dist 目录下。

结合上图，说明了什么：

• webpack 的默认入口文件（entry point）是 ./src/index.js。
• webpack 的默认输出目录（output）是 ./dist。它的默认打包 filename 是 main.js。

4. webpack 打包（题外话）

我们在 /src 目录下，新建 main.js。

// main.js
console.log('This is main.js!')

也可以通过 npx webpack ./src/main.js -o ./build/bundle.js 来打包并输出。
但我们项目一般不会这样使用，不再赘述了。

四、至此

webpack 最简单的配置以及打包已经学会了，接着会介绍 webpack 配置以及 react 搭配。

---

最后附上：

// package.json
{
    "name": "webpack4_demo",
    "version": "1.0.0",
    "description": "从零到一搭建 react 项目",
    "main": "src/index.js",
    "repository": "git@github.com:toFrankie/webpack4_demo.git",
    "author": "Frankie <1426203851@qq.com>",
    "license": "MIT",
    "private": true,
    "scripts": {
        "build": "webpack --progress --colors"
    },
    "dependencies": {
        "webpack": "4.41.2",
        "webpack-cli": "3.3.10"
    }
}