要写一个React+webpack+express的小demo那么先得写React然后再用webpack进行打包，最后再加服务器express，而我上篇文章用webpack打包react+ES6刚好解决了前面的问题，这篇文章是接着上篇写的，只是用来加服务器express。当然了，想先了解一下express的，可以看一下我的一个express的小demo。
那么我们先来看一下上次webpack+React的文件结构：
那么接下来就开始加express了：
- 安装express
安装 Express 并将其保存到依赖列表中：
$ cnpm install express --save
- 安装express的依赖
安装express的依赖，并将其使用--save添加到package.json文件中
$ cnpm install body-parser cookie-parser multer --save
- 创建文件
先创建一个server文件，然后再打开文件，将代码写进去即可。
$ touch server.js
$ vim server.js
server.js中写入下面代码：
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile(__dirname +'/index.html');
});
app.listen(3000, () => {
console.log('Server started.');
});
这里说一下app.use(express.static(__dirname + '/public'));这个的主要作用，刚开始因为自己没有很清楚的理解这个，所以就遇到了一些问题。
这句代码在教程中是这样说的：设置静态文件目录。
那么这是什么意思呢？express会根据静态文件目录去查找静态文件，所以静态目录就不需要作为URL的一部分了，简而言之，你要访问public文件夹下的文件，那么你的URL就不需要有public，它默认会去public下找你所需要的文件，比如你想要访问public下的main.js文件，那么你的URL就是http://localhost:3000/main.js，而不需要再加public，这样说应该就比较明了了。
- 修改index.html
之前index.html中的代码是这样的
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>react-webpack-express-demo</title>
</head>
<body>
<div id = "app"></div>
<script src="./public/out/bundle.js"></script>
</body>
</html>
那么为了让它运行不出错，把<script src="./public/out/bundle.js"></script>这句改为：
<script src="./out/bundle.js"></script>
现在该更清楚的知道app.use(express.static(__dirname + '/public'));的意义了吧，要访问public下的out/bundle.js那么URL就不需要public。
那么我们的这个demo就完美结束啦。
- 运行方式
$ npm run build
$ node server.js
此时打开http://localhost:3000/就可以看见Hello World!了
源码地址：https://github.com/yangzhanmei/react-webpack-express-demo
网友评论