webpack入门--loader篇--1

it2024-12-16  41

以后有关webpack的文章都是写一些自己的理解,如果有错误请指出。

那么关于loader,我觉得要理解loader,首先要知道webpack这玩意儿是干嘛用的,我的理解是webpack就是一种模块打包工具,然后webpack默认就知道怎么去打包js,但是对于其它的比如css或者图片,webpack是不知道如何去打包的,比如说我打包的时候有张图片需要打包

之后执行npm run build,这个npm run 后面跟的可以自定义,这里我自定义成build,之后开始打包,然后发现了一下的错误

能看到Module parse failed,显然这里webpack无法解析jpg文件,也就是说webpack无法打包jpg文件。

所以loader是什么意思,loader就是一种模块的打包方案,对于未知的文件,由于webpack不知道如何打包,因此我们必须通过配置webpack.config.js来告诉webpack,当遇到某些不知道如何打包的文件时,来webpack.config.js中的module来查看如何去打包这些文件。如下图

在配置文件中,因为webpack是模块打包工具,因此对于需要特殊处理才能打包的文件,都写在module中,而rules就是打包的规则,test是需要打包的文件后缀,而use就是当遇到jpg这种后缀的文件时,采用file-loader这种打包方案来打包jpg文件。

那么到这里,loader初步理解就是这样。

最新回复(0)