loader使用

  1. loader 是一个导出为函数的 JS 模块，接收上游产出的结果或者资源文件做为参数
  2. compiler 拿到最后一个 loader 产出的结果，这个结果应该是一个 string 或者 buffer(被转为string)
  3. 从入口文件出发，调用所有配置中的 loader 对模块进行编译，找到依赖模块，递归到所有依赖都被处理
  1. module.exports = {
  2.   mode: 'development',
  3.   devtool: false,
  4.   entry: './src/index.js',
  5.   output: {
  6.     filename: 'build.js',
  7.     path: path.resolve(__dirname, 'dist')
  8.   }, 
  9.   module: {
  10.     rules: [
  11.       {
  12.         test: /\.js$/, 
  13.         use: [
  14.           {
  15.             loader:'babel-loader', 
  16.             options: {
  17.               presets: ['@babel/preset-env']
  18.             }
  19.           }
  20.         ]
  21.       }
  22.     ]
  23.   }
  24. }

配置resolveLoader

  1. module.exports = {
  2.   mode: 'development',
  3.   devtool: false,
  4.   resolveLoader: {
  5.     modules: [path.resolve(__dirname, 'loaders'), 'node_modules']
  6.   },
  7.   entry: './src/index.js',
  8.   output: {
  9.     filename: 'build.js',
  10.     path: path.resolve(__dirname, 'dist')
  11.   },
  12.   module: {
  13.     rules: [
  14.       {
  15.         test: /\.js$/,
  16.         use: [
  17.           {
  18.             // loader: path.resolve(__dirname, 'loaders/test-loader.js')
  19.             loader: 'test-loader'
  20.           }
  21.         ]
  22.       }
  23.     ]
  24.   }
  25. }

loader组成

一个完整的 loader 有两部分组成 pitchLoader 与 normalLoader

  1. function loader(source) {
  2.   console.log('loader2执行了------')
  3.   return source + '//loader2'
  4. }
  5. loader.pitch = function (data) {
  6.   console.log('loader2-pitch')
  7.   return '2222'
  8. }
  9. module.exports = loader

Normal loader

  1. content 源文件的内容
  2. [map] 可以被 https://github.com/mozilla/source-map 使用的 SourceMap 数据

  3. [meta] meta 数据，可以是任何内容

    1. function webpackLoader(content, map, meta) {
    2. // 你的webpack loader代码
    3. }
    4. module.exports = webpackLoader;

    Pitching Loader

  4. remainingRequest 剩余请求

  5. precedingRequest 前置请求
  6. data 数据对象
    1. /**
    2. * @remainingRequest 剩余请求
    3. * @precedingRequest 前置请求
    4. * @data 数据对象
    5. */
    6. function (remainingRequest, precedingRequest, data) {
    7. // some code
    8. };

    参数作用

    有如下三个loader,在b-loader上测试pitch参数 ```typescript // webpack.config.js rules: [ {
    1.  test: /\.js$/,
    2.  use: ['a-loader'],
    }, {
    1.  test: /\.js$/,
    2.  use: ['b-loader'],
    }, {
    1.  test: /\.js$/,
    2.  use: ['c-loader'],
    }, ]

// b-loader function loader(content) { console.log(‘开始执行——-b’); console.log(this.data); // { dnv :’weiyafei’} return content + ‘\nconsole.log(b);’; } loader.pitch = function (remainingRequest, precedingRequest, data) { console.log(‘b-loader————pitch’); console.log(remainingRequest); // H:.….\webpack\loader\loader\c-loader.js!H:.….\webpack\loader\src\index.js 代指下一个loader console.log(precedingRequest); // H:.….\webpack\loader\loader\a-loader.js 代指上一个loader data.env = ‘weiyafei’; }; module.exports = loader;

  1. <a name="bSDVz"></a>
  2. #### 总结
  4. 1. remainingRequest 剩余请求 (代指下一个loader位置和调用chunk)
  5. 1. precedingRequest 前置请求 (代指上一个loader)
  6. 1. data  数据对象 传递数据，可以再nomal loader 中用 this.data 接受
  7. <a name="pCnYS"></a>
  8. #### 作用
  9. 当某个 Pitching Loader 返回非 undefined 值时，就会实现熔断效果（会跳过本身的normal loader 和后续pitch loader、normal loader）
  11. <a name="849821da"></a>
  12. ## loader分类
  14. > 本质上所有的 loader 都是一样的，但是可以通过 enforce 或者不同的使用方式来区分它们
  17. 1. 普通 loader : 没有任务配置正常使用
  18. 1. 前置 loader : 通过 enforce 配置 pre
  19. 1. 后置 loader : 通过 enforce 配置 post
  20. 1. 行内 loader : 通过 !分割符，直接在行内进行使用
  21. 1. 上述的 loader 如果区分之后在执行上也存在固定的先后顺序：pre normal inline post
  23. ```javascript
  24. module.exports = {
  25.   mode: 'development',
  26.   devtool: false,
  27.   resolveLoader: {
  28.     modules: [path.resolve(__dirname, 'loaders'), 'node_modules']
  29.   },
  30.   entry: './src/index.js',
  31.   output: {
  32.     filename: 'build.js',
  33.     path: path.resolve(__dirname, 'dist')
  34.   },
  35.   module: {
  36.     rules: [
  37.       {
  38.         test: /\.js$/,
  39.         use: ['normal-loader']
  40.       },
  41.       {
  42.         test: /\.js$/,
  43.         enforce: 'post',
  44.         use: ['post-loader']
  45.       },
  46.       {
  47.         test: /\.js$/,
  48.         enforce: 'pre',
  49.         use: ['pre-loader']
  50.       }
  51.     ]
  52.   }
  53. }

loader的执行顺序

normal 从后向前、从右向左的, pitch loader 是从左向右，从上到下
image.png
pitch 熔断效果
image.png

如何调试

新建run.js 文件,正常断点调试loader即可

  1. // 引入webpack
  2. const webpack = require('webpack');
  3. // 引入webpack配置文件
  4. const config = require('./webpack.config.js');
  6. // 实例化webpack
  7. const compiler = webpack(config);
  9. // 监听编译事件
  10. compiler.run();

特殊配置符号

在使用 loader 的时候为了操作方便 webpack 允许我们使用不同的符号来使用 loader

  1. ! 跳过 normal loader
  2. -! 跳过 pre 和 normal loader
  3. !! 跳过 pre normal post loader(只有inline)
  1. const title = require('!!inline-loader!./title')

loader获取参数

  1. const { getOptions } = require('loader-utils')
  2. function loader(source) {
  3.   console.log('test-loader执行了------')
  4.   const options = getOptions(this)
  5.   console.log(options, 2222222)
  6.   return source + '//test-loader'
  7. }
  8. module.exports = loader

loader校验

安装 npm i schema-utils -D

  1. {
  2.   "type": "object",
  3.   "properties": {
  4.     "name": {
  5.       "type": "string",
  6.       "description": "输入name"
  7.     },
  8.     "age": {
  9.       "type": "number",
  10.       "description": "输入年纪"
  11.     }
  12.   },
  13.   "additionalProperties": true
  14. }
  1. const { getOptions } = require('loader-utils')
  2. const { validate } = require('schema-utils')
  3. const schemaTestLoader = require('../test-loader.schema.json')
  5. function loader(source) {
  6.   // 设置为异步
  7.   const callback = this.async()
  9.   // 获取参数 
  10.   const options = getOptions(this)
  12.   // 参数校验 
  13.   validate(schemaTestLoader, options)
  15.   setTimeout(() => {
  16.     console.log('test-loader', source, options)
  17.     callback(null, source)
  18.   }, 5000)
  19. }
  21. module.exports = loader

同步的Loader

默认创建的Loader就是同步的Loader,

这个Loader必须通过 return 或者 this.callback 来返回结果，交给下一个loader来处理；

p通常在有错误的情况下，我们会使用 this.callback；

this.callback的用法如下：

  1. 第一个参数必须是 Error 或者 null；
  2. 第二个参数是一个 string或者Buffer；
  1. // 第一种
  2. module.exports = function (content) {
  3.     return content
  4. }
  5. // 第二种
  6. module.exports = function (content) {
  7.     this.callback(null,content)
  8. }

异步的Loader

  1. module.exports = function (content) {
  2.     const callback = this.async()
  3.     setTimeout(()=>{
  4.        callback(null,content) 
  5.     })
  6. }

file-loader

生成一个新的文件名，让 webpack 将当前文件拷贝至指定的路径

  1. const imgSrc = require('./img/t1.jpg')
  2. const oImg = document.createElement('img')
  3. oImg.src = imgSrc
  4. oImg.width = 180
  5. document.body.appendChild(oImg)
  6. ---------------------------------------------------
  7. const { getOptions, interpolateName } = require('loader-utils')
  9. function loader(source) {
  10.   const options = getOptions(this) || {}
  12.   // 生成打包后输出的文件名 
  13.   let filename = interpolateName(this, options.filename, { content: source })
  15.   // 利用 webpack 内部实现的方法将上述文件名所对应的文件拷贝至指定的目录
  16.   this.emitFile(filename, source)
  18.   // 最终返回一个 buffer 或者字符串直接给 compiler 进行使用
  19.   return `module.exports = ${JSON.stringify(filename)}`
  20. }
  21. loader.raw = true
  22. module.exports = loader
  1. 通过 loader-utils里的 interpolateName 方法可以配合 options.name 及文件内容生成一个唯一的文件名
  2. 通过 this.emitFile(uri, content) 让 webpack依据参数创建对应的文件，放在指定目录下
  3. 返回 module.exports=$(JSON.stringify(uri))， 这样就把原来的文件路径替换为编译后的路径

url-loader

建立在 file-loader 之上的一个 loader

  1. const mime = require('mime')
  2. const { getOptions } = require('loader-utils')
  4. function loader(content) {
  5.   const options = getOptions(this) || {}
  6.   let { limit, fallback = 'lg-file-loader' } = options
  7.   // 判断是否存在 limit 
  8.   if (limit) {
  9.     limit = parseInt(limit, 10)
  10.   }
  12.   if (!limit || content.length < limit) {
  13.     let mimeType = mime.getType(this.resourcePath)   // resourcePath就是需要加载的文件路径 
  15.     // 按着规则将图片数据处理为 base64 
  16.     let base64Str = `data:${mimeType};base64,${content.toString('base64')}`
  17.     return `module.exports=${JSON.stringify(base64Str)}`
  18.   } else {
  19.     // 这里的 require 不会自动加载配置文件，需要手动设置
  20.     let fileLoader = require(fallback)
  21.     return fileLoader.call(this, content)
  22.   }
  23. }
  25. loader.raw = true
  26. module.exports = loader
  28. // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ

less-loader

npm i less postcss css-selector-tokenizer -D

  1. // 将 less 编译成css字符串 
  2. let less = require('less')
  4. function loader(content) {
  5.   // 通过调用 this.async 可以返回一个函数，它可以将 loader的执行变为异步，不会直接向后执行
  6.   // loader 默认情况下是同步操作 
  7.   let callback = this.async()
  8.   less.render(content, { filename: this.resource }, (err, output) => {
  9.     console.log(output.css)
  10.     callback(err, output.css)
  11.   })
  12. }
  14. module.exports = loader

style-loader

  1. // 把 css 变成一个 JS 脚本
  2. // 脚本就是动态创建一个 style 标签，并且把这个 style 标签插入到html的header里
  4. function loader(content) {
  5.   console.log(11111)
  6.   return `
  7.     let style = document.createElement('style')
  8.     style.innerHTML = ${JSON.stringify(content)}
  9.     document.head.appendChild(style)
  10.   `
  11. }
  13. module.exports = loader

css-loader打包分析

  1. 普通 CSS无数组
  1. (function () {
  2.   var modules = {
  3.     './src/index.css': (module, exports, require) => {
  4.       module.exports = `body{\r\n background-color: orange; \r\n}`
  5.     }
  6.   }
  8.   var cache = {}
  10.   function require(moduleId) {
  11.     if (cache[moduleId]) {
  12.       return cache[moduleId].exports
  13.     }
  15.     var module = (cache[moduleId] = {
  16.       id: moduleId,
  17.       exports: {}
  18.     })
  19.     modules[moduleId](module, module.exports, require)
  20.     return module.exports
  21.   }
  22.   const css = require('./src/index.css')
  23.   console.log(css)
  24. })()
  1. 添加数组
  1. (function () {
  2.   var modules = {
  3.     './src/index.css': (module, exports, require) => {
  4.       var list = [] // 这里设置为数组就是为了后续处理 @import 
  5.       list.push([
  6.         module.id, 'body{\r\n background-color: red;\r\r}'
  7.       ])
  8.       // 定义一个映射函数，作用就是把第一个 css 描述对象转为CSS代码 
  9.       let cssWithMappingToString = item => item[1]
  10.       let css = list.map(cssWithMappingToString).join('')
  11.       module.exports = css
  12.     }
  13.   }
  15.   var cache = {}
  17.   function require(moduleId) {
  18.     if (cache[moduleId]) {
  19.       return cache[moduleId].exports
  20.     }
  22.     var module = (cache[moduleId] = {
  23.       id: moduleId,
  24.       exports: {}
  25.     })
  26.     modules[moduleId](module, module.exports, require)
  27.     return module.exports
  28.   }
  29.   const css = require('./src/index.css')
  30.   console.log(css)
  31. })()
  1. 新增toString方法
  1. (function () {
  2.   var modules = {
  3.     'css-loader.js!./src/index.css': (module, exports, require) => {
  4.       var api = require('api.js')
  5.       let cssWithMappingToString = item => item[1]
  6.       let EXPORT = api(cssWithMappingToString)
  7.       EXPORT.push([
  8.         module.id, 'body{\r\n background-color: blue;\r\r}'
  9.       ])
  10.       // 定义一个映射函数，作用就是把第一个 css 描述对象转为CSS代码 
  11.       module.exports = EXPORT
  12.     },
  13.     'api.js': (module, exports, require) => {
  14.       module.exports = function (cssWithMappingToString) {
  15.         var list = [] // 这里设置为数组就是为了后续处理 @import 
  16.         list.toString = function () {
  17.           return this.map(cssWithMappingToString).join('')
  18.         }
  19.         return list
  20.       }
  21.     },
  22.     './src/index.css': function (module, exports, require) {
  23.       var result = require('css-loader.js!./src/index.css')
  24.       module.exports = result.toString()
  25.     }
  26.   }
  28.   var cache = {}
  30.   function require(moduleId) {
  31.     if (cache[moduleId]) {
  32.       return cache[moduleId].exports
  33.     }
  35.     var module = (cache[moduleId] = {
  36.       id: moduleId,
  37.       exports: {}
  38.     })
  39.     modules[moduleId](module, module.exports, require)
  40.     return module.exports
  41.   }
  42.   const css = require('./src/index.css')
  43.   console.log(css)
  44. })()
  1. 支持import
  1. (function () {
  2.   var modules = {
  3.     'css-loader.js!./src/global.css': (module, exports, require) => {
  4.       var api = require('api.js')
  5.       let cssWithMappingToString = item => item[1]
  6.       let EXPORT = api(cssWithMappingToString)
  7.       EXPORT.push([
  8.         module.id, 'body{\r\n color: blue;\r\r}'
  9.       ])
  10.       // 定义一个映射函数，作用就是把第一个 css 描述对象转为CSS代码 
  11.       module.exports = EXPORT
  12.     },
  13.     'css-loader.js!./src/index.css': (module, exports, require) => {
  14.       var api = require('api.js')
  15.       let cssWithMappingToString = item => item[1]
  16.       let EXPORT = api(cssWithMappingToString)
  18.       // 需要在 index.css 当中导入 global.css
  19.       let GLOBAL = require('css-loader.js!./src/global.css')
  20.       // 将 global.css 当中的CSS描述信息添加到EXPORT 数组当中
  21.       EXPORT.i(GLOBAL)
  23.       EXPORT.push([
  24.         module.id, 'body{\r\n background-color: blue;\r\r}'
  25.       ])
  26.       // 定义一个映射函数，作用就是把第一个 css 描述对象转为CSS代码 
  27.       module.exports = EXPORT
  28.     },
  29.     'api.js': (module, exports, require) => {
  30.       module.exports = function (cssWithMappingToString) {
  31.         var list = [] // 这里设置为数组就是为了后续处理 @import 
  32.         list.toString = function () {
  33.           return this.map(cssWithMappingToString).join('')
  34.         }
  35.         list.i = function (otherList) {
  36.           list.unshift(...otherList)
  37.         }
  38.         return list
  39.       }
  40.     },
  41.     './src/index.css': (module, exports, require) => {
  42.       var result = require('css-loader.js!./src/index.css')
  43.       module.exports = result.toString()
  44.     }
  45.   }
  47.   var cache = {}
  49.   function require(moduleId) {
  50.     if (cache[moduleId]) {
  51.       return cache[moduleId].exports
  52.     }
  54.     var module = (cache[moduleId] = {
  55.       id: moduleId,
  56.       exports: {}
  57.     })
  58.     modules[moduleId](module, module.exports, require)
  59.     return module.exports
  60.   }
  61.   const css = require('./src/index.css')
  62.   console.log(css)
  63. })()