- 抛弃commonjs规范不提,webpack通过分析入口文件中esm的导入语法进行递归文件寻找,众所周知导入js时无需在webpack中使用loader。
- 为什么导入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
这样我们就可以在运行时使用我们自己的类型文件了,当然我只是举了个最简单的例子,loader如何玩转与自己运行时代码做交互还是要看使用场景,可能大部分时候我们不需要自己写loader,但是理解清它的原理还是很有必要的。