Webpack之Loaders

最新推荐文章于 2025-06-29 18:05:42 发布

原创最新推荐文章于 2025-06-29 18:05:42 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #webpack

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文介绍Webpack中的Loaders如何处理不同类型的资源文件，并将其转换为模块。Loaders支持链式调用，可同步或异步处理资源，且能在配置文件中通过正则表达式绑定。此外，还介绍了如何在代码中通过require语句指定Loader处理特定文件。

What

laoders可以将项目源文件进行处理，流式返回新的文件资源

Features

loader可以链式调用，它们以管道函数的形式对资源文件进行处理，最后一个loader通常返回的是js。
loader可以以同步或异步的方式进行资源处理
loader运行在nodejs环境中
loader接收查询参数，可以对loader进行配置
loader在配置中以正则的形式绑定待处理资源
模块可以在package.json中配置loader来抛出一个loader属性
Plugins可以给loader更多特性

How to use

require指定
通过require或define声明获取loader，loader与资源文件用”!”分隔开，多个loaders用”!”分隔开。

require("./loader!./dir/file.txt");
// => 使用当前目录下的loader.js文件对当前目录下dir目录下file.txt文件进行处理
require("jade!./template.jade");
require("!style!css!less!bootstrap/less/bootstrap.less");
// => 对bootstrap.less文件流式进行less-->css-->style三个loader处理
require("url-loader?mimetype=image/png!./file.png");
// => 带参数的loader

配置文件
可以在配置文件中通过正则匹配进行loader绑定

module: {
     loaders: [
         { test: /\.jade$/, loader: "jade" },
         // => jade-loader处理jade文件
         { test: /\.css$/, loaders: ["style", "css"] },
         // => 对css文件进行css-->style两个loader处理
         { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
         // => 带参数的loader
     ]
 }

命令行cli
格式:webpack –module-bind “[extstr]=[loaderstr]”，如果extstr（文件后缀名）等于loaderstr，可以简写

webpack --module-bind jade --module-bind 'css=style!css'
webpack --module-bind "png=url-loader?mimetype=image/png" //带参的loader

Reference

using loaders