webpack loader使用

Posted 2021-05-12 书和咖啡

本节我们来学习 webpack 中 loader 加载器的使用，那么什么是 loader 呢。从本质上来说，loader 就是一个 Node.js 模块，在 webpack 的定义中，loader 导出一个函数，loader 会在转换源模块的时候调用该函数。

webpack 本身依然是只能处理 JS 文件的，但是通过一系列的 loader ，就可以处理其他文件啦。例如 Less 和 Sass，以前我们编译这些 CSS 预处理器，需要使用 gulp 进行编译，而显示可以通过 webpack 中的 loader 加载器来实现。

常见loader

webpack 中有一系列的 loader，在实际项目中，我们会根据不同的需求使用到不同的 loader。例如 webpack 中的一些常见 loader 如下所示：

• css-loader ： 用于处理 css 文件，使得能在 js 文件中引入使用。
• style-loader ： 用于将 css 文件注入到 index.html 中的 <style> 标签上。
• less-loader：处理 less 代码。
• sass-loader： 处理 sass 代码。
• postcss-loader：用 postcss 来处理 CSS代码。
• babel-loader：用 babel 来转换 ES6 文件到 ES5。
• file-loader：打包图片，打包字体图标。
• url-loader：和 file-loader 类似，但是当文件小于设定的 limit 时，可以返回一个 DataUrl（提升网页性能）。
• html-withimg-loader：打包 HTML 文件中的图片。
• eslint-loader：用于检查常见的 javascript 代码错误，也可以进行"代码规范"检查。

loader的安装和配置

我们可以在 webpack.config.js 配置文件中配置 loader，可以在 module.rules 中指定一个或多个 loader。

通过配置loader 的两个属性来实现：

• test 属性：用来标识出应该被对应的 loader 进行转换的某个或多个文件。
• use 属性：表示转换时要用哪个 loader。

示例：

例如默认情况下 webpack 只能打包 JS 文件，不能识别其他例如 CSS、Less、image等类型的文件，那么如果我们想要打包 CSS 样式文件，可以在 webpack 中使用 loader 加载器，可以将一种文件转换为另一种文件，将webpack不能识别的其它类型文件转换为 webpack 可识别 JS 类型文件。

首先需要安装 style-loader 和 css-loader ，安装命令如下所示：

npm install css-loader style-loader --save-dev

命令执行成功后，这两个 loader 会自动添加到 package.json 的依赖中，如下所示：

"devDependencies": {
    "css-loader": "^3.6.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.43.0",
    "webpack-dev-server": "^3.11.0"
  }

然后在 webpack.config.js 中配置 loader，在 module 属性的 rule 属性中配置 loader 规则：

module:{
	rules:[{
		test:/.css$/,
		use:['style-loader','css-loader']
	}]
}

这里表示匹配所有 .css 后缀结尾的文件，通过 style-loader 和 css-loader 加载器进行转换后再编译。

然后我们创建一个 xkd.css 文件，内容如下所示：

p{
    font-size: 12px;
    color: red;
}

并将 xkd.css 文件导入到 index.js 入口文件中：

document.write('你好，侠课岛！');

// 导入 CSS 文件
import "./xkd.css";

然后我们执行打包命令后会重新生成打包文件，会发现 xkd.css 文件也成功打包到 bundle.js 文件中。

这就是 loader 的基本使用流程，先安装loader，然后在配置文件中配置 loader ，最后再进行打包就可以啦。

loader 特性

• loader 支持链式调用，链中的每个 loader 会将转换应用在已处理过的资源上。一组链式的 loader 将按照相反的顺序执行。链中的第一个 loader 将其结果传递给下一个 loader，依此类推。

• loader 可以是同步的，也可以是异步的。

• loader 运行在 Node.js 中，并且能够执行任何操作。

• loader 也可以内联显示指定。

• loader 可以通过 options 对象配置。

• 除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块。

• 插件(plugin)可以为 loader 带来更多特性。

• loader 能够产生额外的任意文件。