webpack中的loader的使用
1、什么是loader?
loader 用于对模块的源代码进行转换
。loader 可以使你在 import 或"加载"模块时预处理文件。
因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。
loader可以做哪些工作?
- 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript
- 将内联图像转换为 data URL
- 允许你直接在 JavaScript 模块中 import CSS文件
2、loader的安装
在 webpack 中通过 import 方式导入文件内容,
loader 并不是 webpack 内置的,所以要先安装后使用
你的项目需要用到哪个loader,就安装哪个,比如下面,
npm install --save-dev raw-loader
npm install --save-dev file-loader
…
3、loader怎么使用?
在你的应用程序中,有三种使用 loader 的方式:
- 配置(推荐):在 webpack.config.js 文件中指定 loader。
- 内联:在每个 import 语句中显式指定 loader。
- CLI:在 shell 命令中指定它们。
注意:不同loader的使用都是平级的,不存在嵌套的情况
4、常用的loader的使用
(1)raw-loader
raw-loader来实现静态资源内联
安装raw-loader
npm install --save-dev raw-loader
然后在 webpack.config.js 中进行配置
module.exports = {
...,
module: {
rules: [
{
test: /\.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
(2)file-loader
把识别出的资源模块,移动到指定的输出目录,并且返回这个资源在输出目录的地址(字符串)
安装file-loader
npm install --save-dev file-loader
webpack.config.js中,
rules: [
...,
{
// 匹配图片的格式,i表示不区分文件名字母的大小写
test: /\.(png|jpe?g|gif)$/i,
use: {
loader: "file-loader",
options: