Introduction to the

Loader converts source code to object code in javascript format

Example webpack.config.js configuration
rules: [
    {
        test: /\.css$/,
        use: [
            {
                loader: 'css-loader'.options: {}
            },
            path.resolve(__dirname, 'myloader')]},],Copy the code

Loader is introduced

Loader classification:
// (1) inline form
import util from 'raw-loader! . /utils.js'
// (2) Webpack config configuration form: test the same array parallel form
{
    test : /\.css$/,
    loader: 'style-loader'.// pre, normal(default)
    enforce: 'post'
}
Copy the code
Executive priority
  • Different levels: pre > normal > Inline > POST
  • Peer: right to left, bottom to top
Inline mode (prefix)
  • use!Prefix to disable all configured Normal Loaders
  • use!!!!!Prefix to disable all configured loaders (preLoader, loader, postLoader)
  • use-!Prefix, disables all preloaders and loaders configured, but disables postLoaders
Execution order

It is divided into two stages: pitch (to be defined) and execution.

If any loader returns a value during the pitch phase, the loader blocks and enters the execution phase of the previous Loade

Custom loader

my-style-loader
const loaderUtils = require('loader-utils')

function loader(source) {
    / / test
    let style = `
        let style = document.createElement('style')
        style.innerHTML = The ${JSON.stringify(source)}
        document.head.appendChild(style)
    `
    return style
}

// remainingRequest: Loaders behind us in the loader chain and the absolute path to the resource files in '! 'as a string of concatenators.
// precedingRequest: the absolute path of loaders ahead of you in the loader chain with '! 'as a string of concatenators.
// data: a fixed field in the context of each loader that can be used by pitch to pass data to the loader
loader.pitch = function(RemainingRequest precedingRequest data) { // Read the rest of the absolute path
    // Customize the condition
    let str = `
        let style = document.createElement('style')
        style.innerHTML = ${loaderUtils.stringifyRequest(this.'!!!!! ' + remainingRequest)}
        document.head.appendChild(style)
	`
    return str
}
module.exports = loader
Copy the code
my-url-loader
const loaderUtils = require('loader-utils')
const mime = require('mine')

function loader(source) {
    let { limit } = loaderUtils.getOptions(this)

    if (limit && limit > source.length) {
        return `module.exports="data:${mime.getType(this.resoucePath)}; base64,${source.toString('base64')}"`
    } else {
        return require('./file-loader').call(this, source)
    }
}

// source is binary input
loader.raw = true
module.exports = loader
Copy the code

Commonly used API:

// https://www.webpackjs.com/api/loaders/#%E7%A4%BA%E4%BE%8B
this.emitFile(name, content, sourceMap)  / / write file
this.cacheable(false)                    / / no cache

Callback (null, fn(content), map, meta)
/ / asynchronous:
let cb = this.async()
cb(null, res, map, meta)
Copy the code

Tool library

const loaderUtils = require('loader-utils')
let option = loaderUtils.getOptions(this)
/ / / / loaderUtils. StringifyRequest () converts the absolute path to a relative path

/ / schema validation
const validateOptions = require('schema-utils')
const schema = {
    type: 'object'.properties: {
        text: {
            type: 'string'
        },
        filename: {
            type: 'string'}}} validateOptions (schema, option)Copy the code

Reference:

Loader API ## Reveals webpack Loader: image references