【Webpack5笔记】loader的概念以及手写clean-log-loader、banner-loader、babel-loader和file-loader

翘阳啦

于 2022-06-01 10:23:08 发布

阅读量412

点赞数 1

分类专栏： Webpack 文章标签： javascript 前端 webpack node.js

本文链接：https://blog.youkuaiyun.com/qiaoyangla/article/details/125073010

版权

本文详细介绍了Webpack5中的Loader概念及其执行顺序，通过实例手把手教你如何编写clean-log-loader、banner-loader、babel-loader和file-loader。clean-log-loader用于清除js中的console.log语句，banner-loader实现添加注释，babel-loader将ES6+语法转为ES5，file-loader则用于原封不动输出文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Loader概念

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

Loader的执行顺序

pre：前置loader

normal：普通loader

inline：内联loader

post：后置loader

执行的优先级：pre>normal>inline>post

相同优先级执行顺序为：从右到左，从下到上

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {
  rules: [
    {
      test: /\.js$/,
      loader: "loader1",
    },
    {
      test: /\.js$/,
      loader: "loader2",
    },
    {
      test: /\.js$/,
      loader: "loader3",
    },
  ],
},

// 此时loader执行顺序：loader1 - loader2 - loader3
module: {
  rules: [
    {
      enforce: "pre",
      test: /\.js$/,
      loader: "

最低0.47元/天解锁文章