webpack06----自定义babel-loader、tapable、compiler的hooks使用、compilation的使用、自定义copy-webpack-plugin插件、自定义webpack

自定义babel-loader：

1、babelSchema.json：----提供校验loader中options的规则：属性名为presets，它的类型是array，"additionalProperties": true 表示可以追加其他属性

{
  "type": "object",
  "properties": {
    "presets": {
      "type": "array"
    }
  },
  "additionalProperties": true
}

2、babelLoader.js：

const { getOptions } = require('loader-utils') // getOptions()获取loader中的options参数----loader-utils库需要下载
const { validate } = require('schema-utils') // validate()验证loader中的options是否符合规范
const babel = require('@babel/core')
const util = require('util')

const babelSchema = require('./babelSchema.json') // 校验options的规则

const transform = util.promisify(babel.transform) // promisify()将普通的异步函数转换为基于promise的异步方法，babel.transform用来编译代码的方法

module.exports = function (content, map, meta) {
  const options = getOptions(this) || {} // 获取options
  validate(babelSchema, options, { name: 'Babel Loader' }) // 校验options是否合法
  const callback = this.async() // 创建异步
  transform(content, options) // 使用babel编译
    .then(({ code, map }) => {
      callback(null, code, map, meta)
    })
    .catch((e) => {
      callback(e)
    })
}

3、webpack.config.js：

const path = require('path')

module.exports = {
  // webpack5默认有entry和output的配置，这里不用写了
  module: {
    rules: [
      {
        test: /\.js$/,
        // loader: path.resolve(__dirname, 'loaders', 'loader1')
        // loader: 'loader1' // 配置loader解析规则后可以简写
        // use: ['loader1', 'loader2', 'loader3'] // 多个loader用use：执行到loader1时，先执行它的pitch方法；执行loader2时，先执行它的pitch方法；执行loader3时，先执行它的pitch方法。执行完pitch后，从下到上，从又到左执行loader。如果某个loader需要提前做一些处理，可以在pitch中处理
        // use: [
        //   'loader1',
        //   'loader2',
        //   {
        //     loader: 'loader3',
        //     options: { name: '孙艺珍', age:12 } // 如果想要追加属性，schema.json中设置 "additionalProperties": true
        //   }
        // ]
        loader: 'babelLoader',
        options: {
          presets: ['@babel/preset-env'] // presets对应babelSchema.json中定义的属性名

        }
      }
    ]
  },
  // 配置loader解析规则
  resolveLoader: {
    modules: ['node_modules', path.resolve(__dirname, 'loaders')] // 先去node_modules中找，找不到去loaders目录中找
  }
}

tapable：

　　1、下载插件：npm i tapable -D

　　2、tapable.js：

const {
  SyncHook,
  SyncBailHook,
  AsyncParallelHook,
  AsyncSeriesHook
} = require('tapable')

class Lesson {
  constructor() {
    // 初始化hooks容器
    this.hooks = {
      // go: new SyncHook(['address']) // 同步钩子（hook），任务会依次执行
      go: new SyncBailHook(['address']), // 一旦有返回值就会退出
      // leave: new AsyncParallelHook(['name', 'age']), // 异步并行钩子：先输出0618再输出0518
      leave: new AsyncSeriesHook(['name', 'age']) // 异步串行（同步）钩子：先输出0518再输出0618
    }
  }
  // 往hooks容器中注册事件，添加回调函数
  tap() {
    this.hooks.go.tap('class0318', (address) => {
      console.log('class0318', address)
      return 100 // SyncBailHook一旦return后有值就会退出
    })
    this.hooks.go.tap('class0418', (address) => {
      console.log('class0418', address)
    })
    this.hooks.leave.tapAsync('class0518', (name, age, cb) => {
      setTimeout(() => {
        console.log('class0518', name, age)
        cb()
      }, 1000)
    })
    this.hooks.leave.tapPromise('class0618', (name, age) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('class0618', name, age)
          resolve()
        }, 999)
      })
    })
  }
  start() {
    this.hooks.go.call('c318') // 触发hooks。将hooks容器中的hook都触发
    this.hooks.leave.callAsync('孙艺珍', 20, () => {
      console.log('end....') // 回调函数 表示所有leave容器中的钩子都触发完了才会执行
    })
  }
}

let l = new Lesson()
l.tap()
l.start()

compiler的hooks使用：

　　1、新建plugins/Plugin1.js：

class Plugin1 {
  apply(complier) {
    // complier钩子：生命周期函数从上往下依次执行
    complier.hooks.emit.tap('Plugin1', (compilation) => {
      console.log('emit.tap 111')
    })

    complier.hooks.emit.tapAsync('Plugin1', (compilation, cb) => {
      setTimeout(() => {
        console.log('emit.tapAsync 111')
        cb()
      }, 1000)
    })

    complier.hooks.emit.tapPromise('Plugin1', (compilation) => {
      return new Promise((resolve) => {
        setTimeout(() => {
          console.log('emit.tapPromise 111')
          resolve()
        }, 1000)
      })
    })

    complier.hooks.afterEmit.tap('Plugin1', (compilation) => {
      console.log('afterEmit.tap 111')
    })

    complier.hooks.done.tap('Plugin1', (stats) => {
      console.log('done.tap 111')
    })
  }
}

module.exports = Plugin1

　　2、webpack.config.js：

const Plugin1 = require('./plugins/Plugin1')

module.exports = {
  plugins: [new Plugin1()]
}

compilation的使用：

　　1、Plugin2.js：

const fs = require('fs') // fs.readFile()读取文件
const util = require('util') // 利用util.promisify将异步代码转为promise异步
const path = require('path') // 处理路径
const webpack = require('webpack')
const { RawSource } = webpack.sources // 可以创建一个基于webpack风格的文件类型
const readFile = util.promisify(fs.readFile) // 将 fs.readFile 方法转为基于promise风格的异步方法
class Plugin2 {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('Plugin2', (compilation) => {
      compilation.hooks.additionalAssets.tapAsync('Plugin2', async (cb) => {
        // additionalAssets 异步串行钩子
        // debugger
        // return console.log(compilation)
        const content = 'hello plugin2'
        compilation.assets['a.txt'] = {
          // 往要输出资源中，添加一个a.txt
          size() {
            // 文件大小
            return content.length
          },
          source() {
            // 文件内容
            return content
          }
        }
        const data = await readFile(path.resolve(__dirname, 'b.txt')) // 读取某个文件（b.txt）打包到dist中
        compilation.assets['b.txt'] = new RawSource(data) // 往要输出的资源中，添加一个b.txt文件，new RawSource()中传入数据转为a.txt创建时的对象结构（不用自己写那么多函数），创建文件
        // compilation.emitAsset('b.txt', new RawSource(data)) // webpack5
        cb()
      })
    })
  }
}

module.exports = Plugin2

　　2、webpack.config.js：

const Plugin2 = require('./plugins/Plugin2')

module.exports = {
  plugins: [new Plugin2()]
}

自定义copy-webpack-plugin插件：

　　1、下载插件：npm i globby schema-utils -D

　　2、schema.json：

{
  "type": "object",
  "properties": {
    "from": { "type": "string" },
    "to": { "type": "string" },
    "ignore": { "type": "array" }
  },
  "additionalProperties": false
}

　　3、CopyWebpackPlugin.js

const path = require('path')
const fs = require('fs')
const { promisify } = require('util')
const { validate } = require('schema-utils') // 校验插件，需要下载
const globby = require('globby') // 用于匹配文件列表，需要下载
const schema = require('./schema.json')
const { Compilation } = require('webpack')
const webpack = require('webpack')
const readFile = promisify(fs.readFile)
const { RawSource } = webpack.sources
class CopyWebpackPlugin {
  constructor(options = {}) {
    validate(schema, options, {
      name: 'CopyWebpackPlugin'
    })
    this.options = options
  }
  apply(compiler) {
    // 初始化compilation
    compiler.hooks.thisCompilation.tap('CopyWebpackPlugin', (compilation) => {
      // 添加资源的hooks
      compilation.hooks.additionalAssets.tapAsync(
        'CopyWebpackPlugin',
        async (cb) => {
          const { from, ignore } = this.options // 将from中的资源复制到to中，输出出去
          const to = this.options.to ? this.options.to : '.' // to的默认值是 . 表示当前目录
          const context = compiler.options.context // context就是webpack配置，运行指令的目录  context和process.cmd()一样
          const adsoluteFrom = path.isAbsolute(from)
            ? from
            : path.resolve(context, from) // 将输入路径编程绝对路径
          const paths = await globby(adsoluteFrom, { ignore }) // 1、过滤掉ignore的文件夹    globby(要处理的文件夹，options)
          console.log(paths)
          // 2、读取paths中的所有资源
          const files = await Promise.all(
            paths.map(async (absolutePath) => {
              const data = await readFile(absolutePath) // 读取文件
              const relativePath = path.basename(absolutePath) // basename得到最后的文件名称
              const filename = path.join(to, relativePath) // 和to属性结合，没有to----reset.css；有to----css/reset.css
              return {
                data, // 文件数据
                filename // 文件名称
              }
            })
          )
          // 3、生成webpack格式的资源
          const assets = files.map((file) => {
            const source = new RawSource(file.data)
            return {
              source,
              filename: file.filename
            }
          })
          // 4、添加compilation中，输出出去
          assets.forEach((asset) => {
            compilation.emitAsset(asset.filename, asset.source)
          })
          cb()
        }
      )
    })
  }
}

module.exports = CopyWebpackPlugin

　　4、webpack.config.js

// const Plugin1 = require('./plugins/Plugin1')
// const Plugin2 = require('./plugins/Plugin2')
const path = require('path')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
const CopyWebpackPlugin = require('./plugins/CopyWebpackPlugin')

module.exports = {
  plugins: [
    // new Plugin1()
    // new Plugin2()
    new CopyWebpackPlugin({
      // patterns: [{ from: 'public', to: 'css' }]
      // from: path.resolve(__dirname,'./public'),
      from: './public',
      to: 'css',
      ignore: ['index.html']
    })
  ]
}

自定义webpack：

　　D:\desktop\webpack-study\webpack06\04myWebpack

 

 

 

 

 

 

 

 

x