从零开始，配置一套现代前端工具链-优快云博客

本文从空文件夹开始，逐步添加工具，配置一套完整的前端工具链。使用 React.js 框架、Tailwind 编写 CSS、TypeScript 编写脚本、ESLint 检查代码。详细介绍了 Webpack、PostCSS、Babel 等工具的安装、配置和集成，帮助读者系统认识各工具原理。

文章目录

现代前端应用框架（如 Next.js、Nuxt.js 等）都直接集成了完整的工具链，按照官方文档做，一行命令就可以配置完毕。这整套工具在我们调试和构建项目时，在背后做了大量工作。虽然这有助于快速上手，但是非常不利于我们了解其中的原理。

然而，各种工具纷繁复杂，文档浩如烟海。由于工具之多，即使文档再友好、工具本身再易用，也很难快速入门。

本文将带你踏上一段旅程，从一个空文件夹开始，一步一步添加工具，最终配置一套完整的前端工具链。 在其中，我们可以对各个工具的概念、用途和原理有一个比较系统的认识。每个部分都列出了相关文档的链接，方便查阅。

我们使用 React.js 前端框架，使用 Tailwind 编写 CSS，使用 TypeScript 编写脚本，并使用 ESLint 进行代码检查。最终，希望达到和使用 create-react-app 工具创建的项目类似的开发体验。

（本文首发于 skywt.cn，建议查看原文以获得更好的阅读体验。）

TL；DR

配置完毕后，整套工具链的示意图如下：

配置完毕后的工具链示意图

从创建一个 npm 项目开始

创建一个空目录（一般目录名就是项目名），进入其中执行 npm init，这个命令会交互式地让你填写该项目的元信息。

我们将这个项目命名为 study-chain（意为 study frontend toolchain）：

mkdir study-chain
cd study-chain
npm init

确认信息之后，目录下会生成 package.json 文件，记录了项目的元信息：

// package.json
{
   
   
  "name": "study-chain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "SkyWT",
  "license": "ISC"
}

接下来，我们以 moment 模块为例，这是一个用于转换日期格式的模块（这个模块其实已经废弃，不推荐新项目使用。我们只是将其作为示例，参见文档）。

在项目根目录下，使用 npm i 安装模块：

npm i moment

我们只使用这个模块的一个功能为例：将模块引入为 moment 之后，moment().format() 返回当前日期时间字符串。

Webpack

让我们先忘掉 React.js，从编写纯 HTML 和 JavaScript 开始。如何在这个项目里使用之前安装的 moment 模块呢？

考虑编写一个简单的 HTML 文件 index.html：

<html>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

这个 HTML 引用了 index.js。这个 js 文件引入了 moment 模块，将 div 内的内容设置为当前时间：

// index.js
const moment = require("moment");

const app = document.getElementById("app");
app.innerText = moment().format();

**当然，如果此时在浏览器中打开 HTML，这段 js 是无法运行的。**因为 require 是 Node.js 的语法，浏览器并不支持。

但是我们知道这个模块就在本地，它的源文件就在 node_modules/moment 路径下。我们需要一个工具获取这个模块，整合进这段 js 里。这种工具就叫做 bundler。有了 bundler，即使在用于前端的 js 中，我们也能引入模块了。

Webpack 就是其中之一。

**类似的工具有：**Rollup、Parcel。

安装与使用

首先安装 webpack 和 webpack-cli。后者是配套的命令行工具。这两个工具都只是在开发阶段使用，所以使用 --save-dev 安装为开发环境依赖：

npm i webpack webpack-cli --save-dev

安装后，可以直接使用 npx webpack 命令：

npx webpack ./index.js --mode=development

这个命令处理 index.js 文件，解析其中引用的模块，将对应的 js 代码注入该文件。参数 --mode=development 指示生成开发环境下易于调试的文件版本。如果在生产环境，应使用 --mode=production。

运行之后，会生成 dist/main.js（这是默认的输出文件，可配置），这就相当于浏览器版的源文件。于是，修改 HTML 中引用的 script 路径：

<html>
  <body>
    <div id="app"></div>
    <script src="./dist/main.js"></script>
  </body>
</html>

用浏览器打开，可以发现成功地调用了该模块，div 中显示了当前的日期时间。

使用 --watch 参数可以使 webpack 保持运行，持续监听源文件的修改：

npx webpack ./index.js --mode=development --watch

运行时，每当编辑 index.js 并保存，都会自动重新生成 dist/main.js 文件。可以在终端看到对应的输出。

除了 require 语法，webpack 也支持更常用的 import 语法。刚才的引入模块语句可以改成：

// index.js
import moment from "moment";
// ...

配置文件 webpack.config.js

使用 webpack 的配置文件，可以替代运行命令时传递的参数，让命令行的使用更简洁和灵活。（相关文档）

在项目根目录创建名为 webpack.config.js 的文件，内容如下：

// webpack.config.js
const path = require("path");
module.exports = {
   
   
  mode: 'development',
  entry: './index.js',
  output: {
   
   
    filename: 'main.js',
    path: path.resolve(__dirname, "dist")
  }
};

创建了配置文件之后，使用命令行时，只需要使用如下命令：

npx webpack
npx webpack --watch

设置 npm scripts

为了方便起见，可以将以上 webpack 命令设置为 npm scripts。

编辑 package.json 文件，添加 scripts：

// package.json
{
   
   
  // ...
  "scripts": {
   
   
    "build": "webpack",
    "watch": "webpack --watch"
  },
  // ...
}

保存之后，只需使用如下命令，就等同于运行设置的 webpack 命令：

npm run build
npm run watch

为了表述方便，下文将运行 npm run build 命令的这一操作简称为 build。

生成 HTML

现在，构建完成后，访问 index.html 就能看到我们的网站。然而可以发现，这个 HTML 中 main.js 需要我们手动引用。能否让 webpack 帮我们完成这件事情呢？

这就需要让 webpack 为我们在 dist 目录中生成 HTML 文件。这可以通过 html-webpack-plugin 这个插件实现。没错，webpack 不仅是一个打包工具，其还拥有着丰富的插件生态。

运行以下命令安装 html-webpack-plugin（文档）：

npm i html-webpack-plugin --save-dev

将 index.html 重命名为 template.html，内容如下：

<html>
  <body>
    <div id="app"><