遇到bug之前
前兩天在學習express，因為之前用過express，所以就簡單的看了一下express的使用，然后就用react+webpack+express搭建一個框架，剛開始的目錄結構是這樣的：
out目錄下的bundle.js是用webpack打包之后的入口文件。
在加express之前react+webpack是沒有任何問題的，那么我加了express，就只是加了一個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.');
});
初遇bug
看起來沒有任何問題，然而運行結果是這樣的：
剛遇到這個問題的時候我有點懵，然后就開始了萬年不變的方式：
- 立馬Google，希望能找到問題的解決辦法，然而未果。
- 和同窗討論，同未果。
- 向總理請教
其實在向總理請教之前，自己試著解決了很久，但是未果，所以
在大神的指點下才發現自己解決問題時的問題：
- 沒有了解錯誤到底是什么，盲目的只求答案。
- 沒有深刻的理解自己的代碼。
重審bug
- 在Console這里單單憑這一句話是無法判斷錯誤的，所以這時就可以打開Network來看一下到底是什么問題。
從這里可以看出來bundle.js是404，那么就可以發現錯誤是404，那么接下來想一下為什么會出現404呢？
- 判斷出現404的原因
首先第一個想到的肯定是端口的問題，所以就將3000端口替換為8080，再運行程序，發現出現了一樣的錯誤，那么說明并不是端口的問題。
接著就會想到會不會是路徑的問題，導致無法訪問bundle.js這個文件。所以就需要重新審視一下代碼了。 - 重審代碼
說起路徑那么就只有這兩條代碼是訪問路徑的：
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendFile(__dirname +'/index.html');
});
那么先來看第一句，app.use(express.static(__dirname + '/public'));，這句代碼在教程中是這樣說的：設置靜態文件目錄。那么這是什么意思呢？express會根據靜態文件目錄去查找靜態文件，所以靜態目錄就不需要作為URL的一部分了，簡而言之，你要訪問public文件夾下的文件，那么你的URL就不需要有public，它默認會去public下找你所需要的文件，比如你想要訪問public下的main.js文件，那么你的URL就是http://localhost:3000/main.js，而不需要再加public。那么由這個可以推出，如果我想要訪問http://localhost:3000/out/bundle.js，那么就可以將out/bundle.js置于public下，所以就將文件目錄改為：
就完美的解決了剛才的那個bug！
學到
- 遇到問題一定要先找到原因，而不是盲目的去搜尋答案。
- 懂得看Network里面的內容，而不是只看表面的錯誤。
- 遇到問題整理思路，一步一步去解決。
- 不管是學啥一定要懂得每一條代碼的意思，而不是只想著會用就好，不然遇到問題之后完全不知道到底是何原因造成的，其實遇到這個問題的時候有和朋友一起討論，并且也討論到了一個問題，她說她express基礎學的不是很好，但是以前老師搭過的框架可以用，能用就可以了吧，我當時其實也差點放棄對這個問題的解決，也準備拿著以前的框架在里面添東西來著，在自己僅有的耐心下通過總理的指點還是完成了，所以其實并沒有什么是做不成的，只有自己想不想做而已。
