加载器(Loaders)：

loader 是对应用程序中资源文件进行转换。它们是（运行在 Node.js 中的）函数，可以将资源文件作为参数的来源，然后返回新的资源文件

示例：

例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。首先，安装相对应的 loader

其次，配置 webpack.config.js，对每个 .css 文件使用 css-loader，然后类似地，对每个 .ts 文件使用 ts-loader

配置：

在你的应用程序中，有三种方式使用 loader：
- 通过配置
- 在 require 语句中显示使用
- 通过 CLI

通过 webpack.config.js：

module.rules 允许你在 webpack 配置中指定几个 loader
这是展示 loader 的一种简明的方式，并且有助于简洁代码，以及对每个相应的 loader 有一个完整的概述

通过 require：

可以在 require 语句（或 define, require.ensure, 等语句）中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析

通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader

可以给每个loader选项传递查询参数，就像在 web 中那样（?key=value&foo=bar）。也可以使用 JSON 对象（?{"key":"value","foo":"bar"}）

通过 CLI：

可选项，你也可以通过 CLI 使用 loader

这会对 .jade 文件使用 jade-loader，对 .css 文件使用 style-loader 和 css-loader

Loader 特性：

loader 支持链式传递。能够对资源使用流水线(pipeline)。loader 链式地按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript
loader 可以是同步或异步函数
loader 运行在 Node.js 中，并且能够执行任何可能的操作
loader 接收查询参数。用于 loader 间传递配置
loader 也能够使用 options 对象进行配置
除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段
插件(plugin)可以为 loader 带来更多特性
loader 能够产生额外的任意文件

解析 Loader：

loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析

如何编写模块？loader 模块需要导出为一个函数，并且使用 Node.js 兼容的 JavaScript 编写。在通常情况下，你会使用 npm 来管理 loader，但是你也可以将 loader 模块作为应用程序中的文件。

按照约定，loader 通常被命名为 XXX-loader，其中 XXX 是上下文的名称，例如 json-loader。

loader 的名称约定和优先搜索顺序，由 webpack 配置 API 中的 resolveLoader.moduleTemplates 定义。

Webpack基础之加载器相关推荐

webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
webpack中loader加载器(打包非js模块)
通过loader打包非js模块我这儿用VScode为编辑器在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结尾的模块,webpack 默认处理不了, ...
js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
一文学会Webpack实用功能|加载器篇
Webpack 资源模块加载通过探索我们知道可以把css文件作为打包的入口,不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口. 而 ...
需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改比如我们在初识web ...
webpack项目安装与加载器常出现问题
项目名为webpack,直接报错,在package.json里面把名字修改 TypeError: this.getOptions is not a function版本过高,得安装低版本的打包jqu ...
webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

Webpack基础之加载器