新建 index.less 文件，并在 index.js 中引入

less

@color: blue;
body{
  background: @color;
  backgound: url('./public.jpg'); // 覆盖
}

配置 webpack loader

Javascript

module.exports = {
  resolveLoader: {
    modules: ['node_modules', path.resolve('loaders')]
  },
  module:{
    rules: [
      {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      },
    ]
  }

less-loader

less-loader 用 less 编译 index.less，返回编译的 css 文件

首先安装 less yarn add less

Javascript

// less.loader.js
let less = require('less')
function loader(source){
  let css
  less.render(source,(err, result)=>{ // less转义器提供的写法
    css = result.css
  })
  return css
}

module.exports = loader

css-loader

css-loader 对引入的其他模块进行解析

Javascript

// css.loader.js
function loader(source){
  let reg = /url\((.+?)\)/g
  let pos = 0
  let current
  let arr = ['let list = []']
  while (current = reg.exec(source)) {
    let [matchUrl,g] = current // url('./public.jpg'), './public.jpg'
    // console.log(matchUrl,g)
    let last = reg.lastIndex - matchUrl.length
    arr.push(`list.push(${JSON.stringify(source.slice(pos, last))})`)
    pos = reg.lastIndex
    arr.push(`list.push('url('+require(${g})+')')`)
  }
  arr.push(`list.push(${JSON.stringify(source.slice(pos))})`)
  arr.push(`module.exports = list.join('')`)
  // console.log(arr.join('\r\n'))
  return arr.join('\r\n')
}

module.exports = loader

css-loader 将 index.less 文件拆成了一个字符串，并且将 ur l这种引入方式做了些修改，变成 require 引入

style-loader

Javascript

let loaderUtils = require('loader-utils')
function loader(source){
  // 导出脚本
  let str = `
    let style = document.createElement('style')
    style.innerHTML = ${JSON.stringify(source)}
    document.head.appendChild(style)
  `
  return str
}

loader.pitch = function(remainingRequest){
  let str =`
    let style = document.createElement('style')
    style.innerHTML = require(${loaderUtils.stringifyRequest(this,
      '!!'+remainingRequest)})
    document.head.appendChild(style)
  `
  return str
}

module.exports = loader

style-loader 使用了 inline-loader 并设置了前缀 “!!”表示只使用 inline-loader，

remainingRequest 表示剩余的 loader 请求，此处就是 D:\document\loader-webpack\loaders\css-loader.js!D:\document\loader-webpack\loaders\less-loader.js!D:\document\loader-webpack\src\index.less是一个 inline-loader

loaderUtils.stringifyRequest(this, '!!'+remainingRequest)将绝对路径转化为相对路径，即"!!../loaders/css-loader.js!../loaders/less-loader.js!./index.less"