手把手教你webpack3(9)File-Loader配置简述

简介:

FILE-LOADER配置简述

前注:

文档全文请查看 根目录的文档说明

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

DEMO地址

1、概述

简单来说,file-loader 就是将文件(由于一般是图片文件为主,所以下面通常使用图片两字作为替代,方便理解。其他的包括字体文件等),在进行一些处理后(主要是处理文件名和路径),移动打包后的目录中。

处理的内容包括:

  1. 文件名的处理,比如加 [hash]
  2. 路径的处理,比如【把图片文件统一放到img文件夹中】;

优点:

相较于 url-loader 可以将图片转为base64字符串,file-loader 在功能上更加强大一些;

缺点:

实际开发中,将一定大小以下的图片转为 base64字符串,有利于加载速度的提升。

2、配置

2.1、name

名称 类型 默认值 描述
name {String|Function} [hash].[ext] 为你的文件配置自定义文件名模板

简单的来说,这个就是规定,如何命名打包后的文件夹的文件名的。

默认值表示:命名是 哈希值 + 扩展名 的形式。

常见命名方式是:img/[hash].[ext],即将所有的图片(准确的说,是被file-loader处理的文件),都打包到 img 文件夹下。

几点:

  1. [hash:6]可以控制 hash 值的长度,6 表示长度为6,默认是 32;
  2. [ext] 表示是原文件的扩展名,应该没人会想改这个吧?
  3. [path] 不好用一句话概括。举个例子,图片在 /src/logo.png,打包后文件夹是 dist,配置为 '[path][name].[ext]',那么图片最终为:/dist/src/logo.png。实际上是相对于context的路径,context默认是webpack.config.js 的路径;
  4. [name] 表示原文件的文件名(不含后缀名)。例如 logo.png 就是指 logo,但一般不推荐用这个,或者就算用这个,也要加上 [hash],不然不同文件夹有同名文件就出问题了;
  5. [hash] 的全部实际为:[<hashType>:hash:<digestType>:<length>],中间用冒号连接,除了 hash 都可以省略,通常使用默认的就行了,顶多带个长度来限制文件名长度。

2.2、context

名称 类型 默认值 描述
context {String} this.options.context 配置自定义文件 context,默认为 webpack.config.js context

简单暴力的说,影响 name 中的 [path]

举例:

  1. 根目录文件夹名为:file_loader
  2. 图片路径:src/logo.png
  3. 打包文件夹是:dist
  4. 配置为:context: __dirname + '/../'name: '[path][name].[ext]'
  5. 打包结果:dist/file_loader/src/logo.png

2.3、publicPath

名称 类型 默认值 描述
publicPath {String|Function} __webpack_public_path__ 为你的文件配置自定义 public 发布目录

publicPath 这个一般会用webpack本身配置的,和那个效果也一样,但假如你想单独配置,就用这个。

举例:

  1. 假如,你计划把图片打包到放到CDN,我随便举个例子:https://www.abc.com/img这个目录下;
  2. 由于 CDN 和你本地服务器的网址肯定不同,所以你显然是需要通过绝对路径来加载这个图片的;
  3. 假如,图片名字为:logo.png(为了方便理解,我不加[hash]),那么预期图片的 url 为:https://www.abc.com/img/logo.png
  4. 那么,你这样配置就可以了:publicPath: 'https://www.abc.cn/img/'name: '[name].[ext]'
  5. 于是,图片被打包到img文件夹下,加载该图片的链接是:https://www.abc.cn/img/logo.png
  6. 最后,你把img文件夹整个丢到 CDN 上,就ok啦;

2.4、outputPath

名称 类型 默认值 描述
outputPath {String|Function} 'undefined' 为你的文件配置自定义 output 输出目录

这个就更简单了,就是相当于在name之前加了一个文件夹路径;

示例代码:

name: '[name].[ext]',   // 文件名,这个是将图片放在打包后的img文件夹中
publicPath: 'https://www.abc.cn/img/',
outputPath: 'myImage/'    // 这里记得后面要加一个斜杠

图片路径为:src/logo.png,打包后引用该图片的 url 变为:https://www.abc.cn/img/myImage/logo.png

效果和以下配置是一样的:

name: 'myImage/[name].[ext]',   // 文件名,这个是将图片放在打包后的img文件夹中
publicPath: 'https://www.abc.cn/img/',

但优点在于,这个属性可以配为函数,因为是函数,所以就可以判断环境,然后返回不同的值;

当然,name 也可以实现(写成一个函数的返回值,例如 name: getName()),但毕竟不好看,对吧;

注:

1、如果要写成函数,应该写成如下形式:

outputPath: function (fileName) {
    return 'myImage/' + fileName    // 后面要拼上这个 fileName 才行
}

2.5、useRelativePath

名称 类型 默认值 描述
useRelativePath {Boolean} false 如果你希望为每个文件生成一个相对 url 的 context 时,应该将其设置为 true

一般不启用这个。

至于效果,简单来说,当这个开关打开时:

  1. 首先会获取源代码中,图片文件,相对于css文件的路径关系;
  2. 然后打包后,css 代码通常会被打包到 js 文件中,于是根据之前所获取的【路径关系】,来保存打包好的图片文件;

举例来说:

  1. 图片路径:src/img/logo.png
  2. css 路径:src/style/style.css
  3. useRelativePath 设为 true;
  4. css被打包到js后,js的文件路径:dist/dist.js
  5. 打包后的图片路径:img/logo.png
  6. 原因是图片相对于css的路径关系是:css文件的上级目录的img文件夹中命名为logo.png;

2.6、emitFile

名称 类型 默认值 描述
emitFile {Boolean} true 默认情况下会生成文件,可以通过将此项设置为 false 来禁止(例如,使用了服务端的 packages)

简单粗暴的说,这个设置为 false 后,除了图片不会被打包出来,其他都按正常的来。

目录
相关文章
|
3月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
56 0
|
2月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
13 0
|
6月前
|
前端开发 JavaScript
[Node] Node.js Webpack和打包过程(二)
[Node] Node.js Webpack和打包过程(二)
|
2月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
|
7月前
|
JavaScript
新员工webpack打包后上传服务器页面空白
新员工webpack打包后上传服务器页面空白
39 0
|
3月前
|
JSON JavaScript 前端开发
对webpack的理解——打包样式资源
对webpack的理解——打包样式资源
17 0
|
3月前
|
JavaScript 数据库
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
54 0
|
3月前
Webpack打包出错:Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin‘ Require stack:
Webpack打包出错:Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin‘ Require stack:
|
3月前
|
前端开发 JavaScript 开发者
webpack模块打包器
Webpack是一种前端资源构建工具,可以将多个文件和模块打包成一个或多个bundle。它具有高度的可配置性,支持各种类型的文件和插件,可以自定义打包过程和结果。Webpack的核心概念包括入口、出口和模式,可以分别用于指示打包的起点、输出位置和优化级别。Webpack还具有自动化构建过程,通过Tapable机制组织多个处理流程,并允许插件监听特定事件来参与整个构建过程。总之,Webpack是一个功能强大的前端资源构建工具,提供了高度可配置的选项和插件机制,方便开发者进行自定义和扩展。
|
4月前
|
前端开发 JavaScript
探寻webpack打包vue前端项目的过程和出现的问题
前端 vue2 项目中,多人开发,从一段时间开始发现打包变得特别慢,每次线上更新也至少要10几20分钟,正常项目线上更新一般也就1、2分钟,新需求开发拉新分支本地运行也要至少5、6分钟才能运行的起来
48 1

热门文章

最新文章

相关产品

  • 云迁移中心