webpack--loader

文章目录

1. 1. 1.媒体资源loader
2. 2. 2.url-loader和file-loader对比
3. 3. 3.loader中的参数

1.媒体资源loader

需要对图片,视频,文字等进行loader的配置,用到的是url-loader.
列如对图片的配置:

{
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file',
                query: {
                    name: '/assets/images/[name].[ext]',
                    limit: 10000
                }
            }

会配合webpack对资源引入路径进行复写,也就是所谓的引入路径问题.

列如:background样式用url引入背景图片,webpack最终会将各个模块打包成一个文件.

因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径.

如果图片较多,会发很多http请求,会降低页面性能.这个问题可以通过url-loader解决.

url-loader会将引入的图片编码,生成dataUrl,也就是我们俗称的base64.相当于把图片数据翻译成一串字符串.再把字符串打包到js中.

2.url-loader和file-loader对比

url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader.

通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可

3.loader中的参数

上面提到url-loader的参数和file-loader的参数，那么loader的参数是个什么概念呢？loader的参数用来自定义loader处理文件时的工作特性。下面以url-loader为例，介绍一下webpack的loader中的参数。

{
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file',
                query: {
                    name: '/assets/images/[name].[ext]',
                    limit: 10000
                }
            }

等价于

{
                test: /\.(png|jpg|gif|svg)$/,
                loader: 'file?&name=/assets/images/[name].[ext]&limit=10000'
            }

{
                test: /\.jpeg$/,
                use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=output/',
            }

这里涉及到了4个参数：limit、name、outputPath、publicPath。其中limit已经说明过。file-loader相关的是name、outputPath和publicPath。下面解释一下这3个参数
name表示输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希。加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。

outputPath表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面。

publicPath表示打包文件中引用文件的路径前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了