webpack中如何编写一个Loader

什么是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

发布了122 篇原创文章 · 获赞 128 · 访问量 35万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览