loader
loader 用于对模块的源代码进行转换。loader 可以使你在 import
或 "load(加载)" 模块时预处理文件。如:将ts转成js,将内联图转为data URL
示例
// 安装依赖 npm install --save-dev css-loader ts-loader // webpack.config.js module.exports = {
// 程序中组件或者依赖都看成是module,所以loader是在module中的,是对module的处理。module的处理规则(rule)是css-loader,ts-loader module: { rules: [ { test: /\.css$/, use: 'css-loader' }, { test: /\.ts$/, use: 'ts-loader' }, ], }, };
使用 loader
有两种使用 loader 的方式:
注意在 webpack v4 版本可以通过 CLI 使用 loader,但是在 webpack v5 中被弃用
Configuration
loader 从右到左(或从下到上)地取值(evaluate)/执行(execute)。在下面的示例中,从 sass-loader 开始执行,然后继续执行 css-loader,最后以 style-loader 为结束。
module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true, }, }, { loader: 'sass-loader' }, ], }, ], }, };
内联方式
可以在 import
语句或任何 与 "import" 方法同等的引用方式 中指定 loader。使用 !
将资源中的 loader 分开。每个部分都会相对于当前目录解析。
import Styles from 'style-loader!css-loader?modules!./styles.css';
内联 import
语句可以添加前缀 "!" 、"!!"、"-!"。尽量不用,这里不详述
尽量使用configuration。
loader 特性(下面的特性不明白具体应用是什么样的???后续章节后理解)
- loader 支持链式调用
- loader 可以是同步的,也可以是异步的
- loader 运行在 Node.js 中,并且能够执行任何操作
- loader 可以通过
options
对象配置 - 除了常见的通过
package.json
的main
来将一个 npm 模块导出为 loader,还可以在 module.rules 中使用loader
字段直接引用一个模块 - 插件(plugin)可以为 loader 带来更多特性
- loader 能够产生额外的任意文件
可以通过 loader 的预处理函数,为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑,例如:压缩、打包、语言转译(或编译)和 更多其他特性。
解析 loader
loader 遵循标准 模块解析 规则。多数情况下,loader 将从 模块路径 加载(通常是从 npm install
, node_modules
进行加载)
我们预期 loader 模块导出为一个函数,并且编写为 Node.js 兼容的 JavaScript。
按照约定,loader 通常被命名为 xxx-loader
(例如 json-loader
)。
原文:https://webpack.docschina.org/concepts/loaders/#resolving-loaders
标签:module,loader,webpack,模块,import,css From: https://www.cnblogs.com/withheart/p/17929600.html