loader是什么,图片文件的打包方式

webpack入门(3)

loader是什么,图片文件的打包方式

直接上案例

loader是什么,图片文件的打包方式_第1张图片
loader是什么,图片文件的打包方式_第2张图片

webpack默认只能打包js文件,如果要打包类似图片的其他文件,就需要借助loader,在配置文件中的module中配置,比如webpack并不能识别.vue文件,就需要借助vue-loader来打包

如上图,打包之后会在dist目录下生成一个图片文件,但是如果想要图片的名字和后缀不变,则需要作如下配置


loader是什么,图片文件的打包方式_第3张图片
loader是什么,图片文件的打包方式_第4张图片

上面的options的name配置项实际上是起到占位符的作用,例如我们可以给图片名字添加一个hash值

loader是什么,图片文件的打包方式_第5张图片
loader是什么,图片文件的打包方式_第6张图片

上面的配置只能用来打包png图片,下面我们用正则补充一下其他图片的打包配置

loader是什么,图片文件的打包方式_第7张图片

默认情况下图片会被直接打包到dist目录下,但有些时候我们想让图片打包到指定文件夹下就需要作如下配置:

loader是什么,图片文件的打包方式_第8张图片
loader是什么,图片文件的打包方式_第9张图片

通过outputPath配置可以达到我们要的效果

在webpack中有一个url-loader类似我们刚才用的file-loader,先来安装一下:

npm install url-loader -D

执行打包命令:npm run bundle

loader是什么,图片文件的打包方式_第10张图片
loader是什么,图片文件的打包方式_第11张图片

打包后发现,图片好像并没有打包生成文件,然而程序却可以正常运行,图片也能正确显示出来,这是因为url-loader是将图片打包成了base64字符串

使用url-loader打包有一个好处,将图片打包成字符串放到js文件中,js加载完页面就显示出来了,不用额外的去请求一个图片文件,省去了一个http请求,但是如果图片文件过大,会导致我们js的加载慢,使页面空白时间较长,所以如果是很小的图片,使用base64会是一个很好的选择。

因此产生一个这样的需求,大的图片文件我们不要将它打包到bundle.js文件中,而是生成一个图片文件,小的图片文件直接打包到bundle.js中;

实现如下:

loader是什么,图片文件的打包方式_第12张图片

你可能感兴趣的:(loader是什么,图片文件的打包方式)