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其实就是一个函数。

打包前：

打包后：

到这里，我们很轻松的就完成了一个自己的Loader。感谢慕课网的dell lee老师，通俗易懂的讲解使我更加容易的理解了如何创建一个loader