如何用 Webpack 搭建一个纯粹的 React 项目

本篇并不是一篇从零搭建 React 项目的文章, 本篇的目的是想把重点放在 webpack-dev-middleware 上, 理解开发服务器的工作, 为后续 ssr 的理解, 即服务端渲染打好基础.

利用 InsCode, 不需要写太多的文字, 直接看代码反尔简洁明了, 可以看到一步步的过程.

打包 React 应用

在这一步里, 我们暂时不考虑开发服务器, 仅仅来打包一个 React 应用.

一个 React 应用被打包后就是一个 js 文件. 利用 dom api 来创建出界面.

打包工具我们使用 webpack, 并用到了以下的 loader 和 插件.

• babel-loader: 把 jsx 转化成 js.
• html-webpack-plugin: 打包完成后生成一个 index.html 文件.

在这个 InsCode 中演示了 build 过程, 然后用 serve 库 serve 了打包后的文件.

加入 React-Router

用 webpack-dev-middleware 写一个开发服务器

我们模仿 umi 框架, 用 webpack-dev-middleware 写一个开发服务器.

开发服务器是一个 express 实例. webpack-dev-middleware 是一个中间件.

const middleware = require("webpack-dev-middleware");

const compiler = webpack(config);
const app = express();

app.use(middleware(compiler));

加入 fallback

由于 React 这样的单页应用的特性, 整个应用其实只有一个页面, 所以在布署单页应用的时候需要将不同的路径都定位到根路径去.

以 nginx 为例:

location / {
  root /somepath;
  try_files $uri $uri/ /index.html;
  index index.html;
}

在开发的时候, 就需要用到 connect-history-api-fallback 这个中间件.

注意这个中间件的使用顺序, 如果它放在后面会不生效.

app.use(
  fallback()
);

app.use(middleware(compiler));

至此一个简单的开发服务器就写好了.

下一篇 文章我会在这个服务器的基础上加入 ssr 的功能.