webpack手写——编写一个loader(一)

新建一项目make-loader并初始化项目

npm init -y

安装npm install webpack webpack-cli --save-dev
添加脚本:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

在根目录下新建一文件webpack.config.js
webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

运行npm run build,打包的文件中:

新建一目录loaders,在目录下新建replaceLoader.js
loaders/replaceLoader.js

module.exports = function(source){
    return source.replace('kate', 'dellLee')
}

使用自己编写的插件:
webpack.config.js

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js/,
                use: [
                    path.resolve(__dirname, './loaders/replaceLoader.js')
                ]
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

运行npm run build,打包的文件中:

插件接受传递过来的参数

webpack.config.js

module: {
        rules: [
            {
                test: /\.js/,
                use: {
                    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                    //配置参数
                    options: {
                        name: 'kate'
                    }
                }
            }
        ]
    },

loaders/replaceLoader.js

module.exports = function(source){
    console.log(this.query)  //接收传递过来的参数
    return source.replace('kate', 'dellLee')
}

运行npm run build:

getOptions

参考文档: https://www.webpackjs.com/api/loaders/#this-query
options 已取代 query，所以此属性废弃。使用 loader-utils 中的 getOptions 方法来取代给定 loader 的 option。
安装:

npm i loader-utils --save-dev

loaders/replaceLoader.js

const loaderUtils = require('loader-utils')
module.exports = function(source){
    // console.log(this.query)  //接收传递过来的参数
    const options = loaderUtils.getOptions(this)
    console.log(options.name)
    return source.replace('kate', 'dellLee')
}

异步loader如何编写

loaders/replaceLoader.js

const loaderUtils = require('loader-utils')
module.exports = function(source){
    const options = loaderUtils.getOptions(this)

    setTimeout(() => {
        const result = source.replace('kate', options.name)
        return result
    }, 1000)
}

运行报错: Error: Final loader (./loaders/replaceLoader.js) didn’t return a Buffer or String

loaders/replaceLoader.js

const loaderUtils = require('loader-utils')
module.exports = function(source){
    const options = loaderUtils.getOptions(this)
    const callback = this.async()

    setTimeout(() => {
        const result = source.replace('kate', options.name)
        callback(null, result)
    }, 1000)
}

如何使用多个loader

webpack.config.js

module: {
        rules: [
            {
                test: /\.js/,
                use: {
                    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                }
            },
            {
                test: /\.js/,
                use: {
                    loader: path.resolve(__dirname, './loaders/replaceLoaderAsync.js'),
                    //配置参数
                    options: {
                        name: 'yue'
                    }
                }
            }
        ]
    },

loaders/replaceLoader.js

const loaderUtils = require('loader-utils')
module.exports = function(source){
    return source.replace('yue', 'world')
}

loaders/replaceLoaderAsync.js

const loaderUtils = require('loader-utils')
module.exports = function(source){
    const options = loaderUtils.getOptions(this)
    const callback = this.async()

    setTimeout(() => {
        const result = source.replace('kate', options.name)
        callback(null, result)
    }, 1000)
}

运行npm run build,