如何创建一个自定义 loader

一、首先创建进入一个目录并初始化 npm

mkdir my-loader
cd my-loader
npm init -y

project

package.json

src/index.js

//导出一个函数（node的方式），由webpack进行调用
module.exports = function(source){   
   console.log("这是loader日志",source);   
   return source;
}

二、通过`npm link`的形式进行本地调试

三、在项目根目录下，通过执行`npm link my-loader`

将 上一步 注册到全局的npm模块链接到本地项目中

通过my-loader目录中package.json中的name，使用自定义loader

// webpack-demo/main.js
const path = require("path");
module.exports = { 
     mode: "development",  
     entry: "./src/main.js", 
     output: {
         filename: "bundle.js",    
         path: path.resolve(__dirname, "./dist"),  
     }, 
     module: {
          rules: [
            {       
               test: /\.js$/i,        
               use: ["my-loader"],      
            },    
          ], 
     },
};