作业要求

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.eotModule 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-3400ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2Module 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-3503ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.woffModule 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-3586ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.ttfModule 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-3667ERROR in ./~/bootstrap/dist/fonts/glyphicons-halflings-regular.svgModule 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 模块之后，对文件和图片的打包终于成功了。