开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第21天，点击查看活动详情

前言

前面我已经学习了webpack的基础知识和一些应用，下面会写一下webpack的原理知识，来加深对webpack的了解！

loader

loader的功能是帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

loader 使用方式

loader的写法有两种,第一种就是在webpack.config.js中写,可以参考webpack五大核心,下面写第二种:内联方式。

内联方式就是在在每个 import 语句中去指定 loader,写法如下:

// 比如在main.js中引入
import Styles from 'style-loader!css-loader?modules!./styles.css';

上面代码的含义是使用 css-loader 和 style-loader 处理 styles.css 文件,多个loader通过 ! 进行分割

内联方式的loader可以通过添加不同前缀,跳过其他类型 loader,方法如下:

// 通过" ! " 跳过 normal loader
import Styles from '!style-loader!css-loader?modules!./styles.css';

// 通过" -! " 跳过 pre 和 normal loader
import Styles from '-!style-loader!css-loader?modules!./styles.css';

// 通过" !! " 跳过 pre、 normal 和 post loader
import Styles from '!!style-loader!css-loader?modules!./styles.css'

注: 因为内联loader的复用性差，所以一般并不会用！

loader 执行顺序

loader分为以下四类,四类loader 的执行优级为：pre > normal > inline > post ,相同优先级的 loader 执行顺序为：从右到左，从下到上。

pre //前置 loader
normal //普通 loader
inline //内联 loader
post //后置 loader

像下面loader的执行顺序就是sass-loader stylus-loader less-loader

// 例子
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.s[ac]ss$/,
      loader: "sass-loader",
    },
    {
      // 没有enforce就是normal
      test: /\.styl$/,
      use: "stylus-loader",
    },
    {
      enforce: "post",
      test: /\.less$/,
      use: "less-loader",
    },
  ],
},

写一个loader

// loaders/loader-dome.js
module.exports = function loader(content) {
  console.log("这是我的第一个loader");
  return content;
};

// webpack.confog.js
module: {
  rules: [
    {
      test: /\.js$/,
      loader: './loaders/loader-demo.js'
    }
  ]
}

如上,在loader-dome.js中导出一个函数,并在webpack。config.js中使用可,再次打包代码会看到终端如下图,说明这个loader执行成功了,它接收需要处理的源码作为参数，输出转换后的 js 代码。

接收的参数

loader可以接收三个参数，如下：

content // 源文件的内容
map // SourceMap 数据
meta // 数据，可以是任何内容

小结

通过以上内容,学到了如何自定义一个简单的loader,下一篇会写同步loader和异步loader,持续学习,今天是第21天，加油！