軟件測試-HW1

做業要求

Briefly describe an error from your past projects that you have recently completed or an error from other projects which impress you most. State the reason, impact of the error and how did you find it.（簡要地描述一下在你最近完成的項目中或者是其它項目中最令你印象深入的一個錯誤。陳述你的理由，這個錯誤所帶來的影響以及你是怎樣發現它的。）

做業完成

錯誤描述

最近在學習使用 webpack 對 css/js/less/images/fonts 等各種資源進行打包。因爲項目須要對文件和圖片進行打包，在查看相關技術文檔和博客以後發現，file-loader 或者是 url-loader 兩個模塊都可以達到目的。在選用了 url-loader 對其進行打包並寫入 webpack.config.js 配置文件後，進行打包時出現如下錯誤：

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module build failed: Error: Cannot find module 'file-loader'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports (F:\Projects\React\express-react-webpack\node_modules\url-loader\index.js:18:20)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3278-3330 6:3348-3400

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2
Module build failed: Error: Cannot find module 'file-loader'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports (F:\Projects\React\express-react-webpack\node_modules\url-loader\index.js:18:20)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3449-3503

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
Module build failed: Error: Cannot find module 'file-loader'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports (F:\Projects\React\express-react-webpack\node_modules\url-loader\index.js:18:20)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3533-3586

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
Module build failed: Error: Cannot find module 'file-loader'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports (F:\Projects\React\express-react-webpack\node_modules\url-loader\index.js:18:20)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3615-3667

ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
Module build failed: Error: Cannot find module 'file-loader'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.module.exports (F:\Projects\React\express-react-webpack\node_modules\url-loader\index.js:18:20)
@ ./~/css-loader!./~/bootstrap/dist/css/bootstrap.min.css 6:3700-3752

通過對錯誤提示信息的分析和相關技術文檔的解釋，我發現 url-loader 這一模塊是對 file-loader 這一模塊的上層封裝。也就是說 url-loader 要依賴於 file-loader。所以還要安裝對應的 file-loader 模塊方能避免上述錯誤，從而對文件和圖片進行打包。

選取理由

忽視了 url-loader 對 file-loader 的依賴關係，而且在查閱資料的時候也沒有進行深刻的瞭解。歸根究底，是本身急於解決需求忽視了根本而致使的「不求甚解」。

形成影響

因爲存在對 file-loader 和 url-loader 這兩個模塊存在「二選其一」的先入爲主，致使在解決問題的過程中浪費了不少時間。並且因爲沒法實現對文件和圖片的打包，使得接下來的開發任務陷入停滯，沒法進行。

發現過程

剛開始只是以爲本身的配置文件有問題，因此一直在這個方向進行資料查閱。後來仔細看輸出的錯誤信息才發現缺乏 file-loader 模塊。再加上後來又查閱了更多的相關資料，才發現以前對這兩個模塊的認識存在嚴重失誤，致使出現如此低級的錯誤。在安裝了對應的 file-loader 模塊以後，對文件和圖片的打包終於成功了。