webpack5(六)-- 自定义loader

发布日期:2020-10-12 阅读量:930

1. 基础

   loader就是一个函数,当webpack解析资源时会调用相应的loader去处理

   loader接收三个参数(content, map, meta)

       content: 文件内容

       map: source map相关

       meta: 其他loader传递过来的参数

2. 简单实现

   新建main.js

    console.log('hello')

   新建test-loader.js

    module.exports = function (content) {
      console.log(content)
      return content
    }

   配置

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

   执行 npx webpack 输出打印结果

    PS D:\projects\wsource\wl> npx webpack
    console.log('hello')
    asset static/js/main.js 217 bytes [compared for emit] (name: main) 1 related asset
    asset index.html 60 bytes [compared for emit]
    ./src/main.js 20 bytes [built] [code generated]
    webpack 5.74.0 compiled successfully in 169 ms