- 抛弃commonjs规范不提，webpack通过分析入口文件中esm的导入语法进行递归文件寻找，众所周知导入js时无需在webpack中使用loader。
js-import
- 为什么导入js文件时可以不配置任何loader就在运行时正常执行呢？
浏览器是可以解析js文件的，而webpack导入js文件时很像是直接把我们要的文件复制粘贴进来，虽然真实情况并非如此，但是可以根据这样的思路递推出为什么js文件导入可以不需要loader。
js文件复制粘贴到了另一个js文件本身就是可以直接运行的，需要转换才很奇怪。
- babel-loader不就是对js导入进行转换的么？
是的，但是babel-loader的作用并非是解析js，因为浏览器本身可以解析js，但是并不是所有浏览器都可以解析es6以上的语法，而babel-loader的作用实际上是将高级语法转换成兼容其它浏览器的低级语法。
- loader如何与我们运行时代码做的交互？
通过import ，当我们代码中写上import时，在运行环境中真的时存在import语法么，显然不是的。我们的语法实际上是被loader的输出内容做了替换。
思考下@svgr/webpack这个webpack loader，它让我们可以将svg进行组件化导入，原理很简单，运行时我们导入svg文件的语句已经变成@svgr/webpack输出的内容了，而在编译时@svgr/webpack读取我们导入的svg文件内容，并通过编译解析（正则查词或者状态机的方式），将其转换成js对象进行输出。
- 可以用loader做什么有意思的事情？
举个例子：
我们可以自定义一套语法格式的文件，如做一个.tree后缀文件，我们解析它，将它解析成js对象输出
root
foo
bar
page-loader
这样我们就可以在运行时使用我们自己的类型文件了，当然我只是举了个最简单的例子，loader如何玩转与自己运行时代码做交互还是要看使用场景，可能大部分时候我们不需要自己写loader，但是理解清它的原理还是很有必要的。
网友评论