webpack中如何编写一个Loader

深藏阁楼爱情的钟 2021-08-27 19:07 374阅读 0赞

什么是Loader?  
所谓 loader 只是一个导出为函数的 JavaScript 模块。这句话出自webpack的官方文档，那么现在我们可以知道其实loader就是一个函数，我们可以在这个函数里做一些事情。loader runner 会调用这个函数，然后把上一个 loader 产生的结果或者资源文件(resource file)传入进去。

Loader的解析顺序？  
从下到上从右到左

知道了上面两个特性以后 我们就可以尝试来编写一个属于自己的Loader啦。

首先我们在本地新建一个文件夹，npm init初始化一下这个文件夹，然后安装webpack, webpack-cli。安装完毕以后，新建一个src文件用来存放我们的源代码，这里我们只新建一个最简单的index.js文件。新建一个webpack.config.js配置文件，当webpack打包的时候它会根据这个文件里的配置去打包，为了方便，我们在package.json文件中新添一个script命令 build 当我们运行它的时候 会执行wbepack打包。

npm init -y  
   
npm install webpack webpack-cli --save

"scripts": \{  
    "build": "webpack"  
  \},  
// src/index.js  
let str = 'Hello,world'  
我们新建一个loaders文件夹，编写两个js文件。

// loader只是一个js函数而已，我们所要做的就是在函数里处理一下文件  
// loaders/replaceLoader  
const loaderUtils = require('loader-utils');  
   
module.exports = function(source) \{  
  const options = loaderUtils.getOptions(this);  
  const result = source.replace('world', options.name)  
  this.callback(null ,result)  
\}  
   
   
// loaders/replaceLoadersAsync  
module.exports = function(source) \{  
  callback = this.async();  
  setTimeout(() => \{  
    const result = source.replace('Hello', 'Hi!')  
    callback(null, result)  
  \}, 1000)  
\}  
接着，我们来编写webpack.config.js配置文件，用刚刚写好的loader来打包我们的index.js

// webpack.config.js  
const path = require('path');  
   
module.exports = \{  
  mode: 'development',  
  entry: './src/index.js',  
  resolveLoader: \{  
    modules: \['node\_modules', './loaders'\]  
  \},  
  module: \{  
    rules: \[  
      \{  
        test: /\\.js$/,  
        use: \[  
          \{  
            loader: 'foreachLoader'  
          \},  
          \{  
            loader: 'splitLoader',  
            options: \{  
              name: 'GuoZhaoXi'  
            \}  
          \}  
        \]  
      \}  
    \]  
  \},  
  output: \{  
    path: path.resolve(\_\_dirname, 'dist'),  
    filename: '\[name\].js'  
  \}  
\}  
最后 我们来看一下打包前和打包后的对比，更加直观的来理解一下loader其实就是一个函数。  
————————————————  
版权声明：本文为CSDN博主「趁着年轻吃点苦」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/g1197410313/article/details/88575673