使用webpack loader加载器

2021-09-15 18:39:57

了解webpack请移步webpack初识!

什么是loader

loaders 用于转换应用程序的资源文件，他们是运行在nodejs下的函数使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)，例如：你可以使用loader来告诉webpack去加载一个coffeescript或者jsx

loader 特性

loaders可以串联，他们应用于管道资源，最后的loader将返回javascript，其它的可返回任意格式（传递给下一个loader）
loaders 可以同步也可以异步
loaders在nodejs下运行并且可以做一切可能的事
loader接受参数，可用于配置里
loaders可以绑定到extension/RegExps 配置
loaders 可以通过npm发布和安装
正常的模块儿可以到处一个loader除了
loaders 可以访问配置
插件可以给loaders更多的特性
loaders可以释放任意额外的文件

如果你对loader的例子感兴趣可以去看下现有的loader列表

解析loaders

loaders的解析类似模块儿，一个loader模块会导出一个方法并且可被nodejs写为可兼容的javascript，通常情况下通过npm来管理loaders，但你也可以把loader放在自己的应用里

引用loaders

按照惯例，虽然不是必须的，但loaders通常被命名为XXX-loader, XXX是上下文名称，比如json-loader.
你可能引用loaders通过完整的（真实的）名字例如（json-loader)或者通过他的速记名（.json)
loader的名称约定和优先级搜索是通过webpack内置api esolveLoader.moduleTemplates所定义
loader的名称约定很有用处，特别是当你通过require()声明来引用的时候，下面会讲到用法

安装loaders

如果这个loader可以在npm上安装，你可以安装这个loader通过

$ npm install xxx-loader --save

或者

$ npm install xxx-loader --save-dev

用法

有很多种方法在你的app中使用loaders

明确的require声明(在想要试用的js文件夹里直接加载)
通过配置文件配置
通过CLI配置

require

提示：如果可以的话尽量不要使用require ，如果你想让你的脚本可运行在服务端和客户端（nodejs和浏览器）使用约定配置文件来配置

通过require声明（define，require.ensure,等等）来加载指定的loaders ，使用!来分割资源loaders，每一部分会被解析到当前的文件

可以在配置文件里通过加!前缀这种规则重写任意的loader

require("./loader!./dir/file.txt");

require("jade!./template.jade");
 
require("!style!css!less!bootstrap/less/bootstrap.less");

配置文件

你可以通过正则在配置文件里绑定loaders

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader 用于.jade文件

            { test: /\.css$/, loader: "style!css" },
            // => "style" 和 "css" loader 用于 ".css" 文件
            //另一种语法
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI(命令行界面)

CLI
可以通过命令行来绑定加载器

$ webpack --module-bind jade --module-bind 'css=style!css'
 // 使用loader'jade'来加载'.jade'的文件 ,使用loaders 'style'和'css'加载'.css'文件

查询参数

loader可以使用查询参数通过字符串（像web上的一样）查询字符串被插在?后面例如url-loader?mimetype=image/png.

提示：查询参数的格式由loader决定，查看loader格式文档大多数的loaders接受如下格式的参数形式（?key=value&key2=value2）和JSON 对象格式 (?{"key":"value","key2":"value2"}).

require里

require("url-loader?mimetype=image/png!./file.png");

配置文件里

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

或者

{
    test: /\.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
}

CLI方式

webpack --module-bind "png=url-loader?mimetype=image/png"

个人理解

以上文段皆翻译自webpack官网若有错误请指正，接下来说下个人对loader的理解，我觉得loader是一个很于意思的功能，webpack其实运行在node下的一个编译站，她可以将各种个样的文件打包起来，包括图片呀，css呀，视频呀，但无论怎么打包最后导出的都是javascrit，但是我们最终被客户端拉出的页面需要css的渲染需要图片的路径，而loader她可以把各种各样的资源文件进行转变编译，最后用正确的格式加载到浏览器中，比如css被转换为style插入到页面，图片被转换为base64格式

码农公寓