webpack-loader记录

loader的意义就在于他可以帮你"改代码"

比如说，你在一个js文件里写了一行“错误”的代码，loader可以识别到这些代码并且将它转换为正确的代码。

最好的例子就是jsx写法，当在js文件中没有别的配置，直接写jsx必定是报错的，但是jsx可以被jsx-loader识别后转换为了CreateElement的函数表达式，然后再交给js引擎去执行，那么我们的错误代码也可以运行起来了。这可以配合一系列的语法检查，语法提示工具，可以很大程度上提升开发效率以及代码的可维护性和可读性。

每个loader都是一个函数或者一个模块导出为一个函数，该函数的作用就是接收你的“错误代码”并且将它转换为“正确代码”

并且可以同时存在多个loader，每个loader在转换代码结束后会把代码交接给下一位loader直到最后一位loader。

官网链接 https://www.webpackjs.com/api/loaders/#%E5%90%8C%E6%AD%A5-loader

同步loader

绝大多数情况下，我们只需要写同步loader，算了，还是看官网来的简洁明了，loader的api官网都列得很清楚了，直接上代码，下面的loader是为了在vue的单文件组件中，以i-开头的组件都可以无需引入和注册即可使用，loader会帮我们解析模板并完成依赖的组件的引入和注册，即避免了全局引入所有组件导致的首页文件体积过大，也避免了开发时需要重复的写import和components:{}.并且可以自己方便得进行组件的全局替换。

个人觉得开发体验极佳，唯一需要遵循的是所有iview的组件统一以i-开头写在模板里，并且自己不要使用i-开头定义组件。

思路其实简单，查找出template里的i-开头的标签，转换为驼峰式，查找出components注册组件的代码，如果不存在就创建一份components,向components插入‘i-select’:Select,这样的代码，并且去重，找出import *** iview这行代码，如果不存在就创建一行，插入驼峰式的组件（之前查找出来的），并且去重，返回处理完成后的代码。然后就是优化性能，跳过node_modules和exclude，跳过template不包含i-开头标签的.vue文件