var el = document.getElementById('element');

// 当鼠标移动到该元素上时给该元素设置 `will-change` 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 `will-change` 属性
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
  // 填写上那些你知道的，会在 CSS 动画中发生改变的 CSS 属性名们
  this.style.willChange = 'transform, opacity';
}

function removeHint() {
  this.style.willChange = 'auto';
}

const {
  SyncHook,
  SyncBailHook,
  SyncWaterfallHook,
  SyncLoopHook,
  AsyncParallelHook,
  AsyncParallelBailHook,
  AsyncSeriesHook,
  AsyncSeriesBailHook,
  AsyncSeriesWaterfallHook
} = require('tapable');

// 1
const hook1 = new SyncHook(['arg1', 'arg2', 'arg3']);
// 2
hook1.tap('hook1', (arg1, arg2, arg3) => console.log(arg1, arg2, arg3));
// 3
hoo1.call(1, 2, 3); // 1, 2, 3

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

class Car {
  constructor() {
    this.hooks = {
      accelerate: new SyncHook(['newSpeed']),
      break: new SyncHook(),
      caculateRoutes: new AsyncParallelHook(['source', 'target', 'routesList'])
    };
  }
}

const myCar = new Car();

myCar.hooks.break.tap('WarningLampPlugin', () => console.log('WarningLampPlugin'));

myCar.hooks.accelerate.tap('LoggerPlugin', newSpeed => console.log(`Accelerate to ${newSpeed}`));

myCar.hooks.calculateRoutes.tapPromise('calculateRoutes tapPromise', (source, target, routesList, callback) => {
  return new Promise((resolve, rejct) => {
    setTimeout(() => {
      console.log(`tapPromise to ${source} ${target} ${routesList}`);
      resolve();
    }, 1000)
  })
});

myCar.hooks.break.call();
myCar.hooks.accelerate.call('hello');

console.time('cost');

myCar.hooks.calculateRoutes.promise('i', 'love', 'tapable').then(() => {
  console.timeEnd('cost');
}).catch(err => {
  console.error(err);
  console.timeEnd('cost');
})

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

class Compiler {
  constructor(options) {
    this.hooks = {
      accelerate: new SyncHook(['newSpeed']),
      break: new SyncHook(),
      calculateRoutes: new AsyncParallelHook(['source', 'target', 'routesList'])
    };

    let plugins = options.plugins;
    if (plugins && plugins.length > 0) {
      plugins.forEach(plugin => plugin.apply(this));
    }
  }

  run() {
    console.time('cost');
    this.accelerate('hello');
    this.break();
    this.caculateRoutes('i', 'love', 'tapable');
  }

  accelerate(param) {
    this.hooks.accelerate.call(param);
  }

  break() {
    this.hooks.break.call();
  }

  calculateRoutes() {
    const args = Array.from(arguments);
    this.hooks.calculateRoutes.callAsync(...args, err=> {
      console.time('cost');
      if (err) console.error(err);
    });
  }
}

module.exports = Compiler;

const Compiler = require('./Compiler');

class MyPlugin {
  constructor() {}

  apply(compiler) {
    compiler.hooks.break.tap('WarningLampPlugin', () => console.log('WarningLampPlugin'));
    compiler.hooks.accelerate.tap('LoggerPlugin', newSpeed => console.log(`Accelerating to ${newSpeed}`));
    compiler.hooks.calculateRoutes.tapAsync('calculateRoutes tapAsync', (source, target, routesList, callback) => {
      setTimeout(() => {
        console.log(`tapAsync to ${source} ${target} ${routesList}`);
        callback();
      }, 2000);
    });
  }
}

const myPlugin = new MyPlugin();
const options = {
  plugins: [myPlugin]
}
let compiler = new Compiler(options);
compiler.run();

class PluginDemo {
  constructor() {}

  apply(compiler) {
    compiler.hooks.compilation.tap('PluginDemo', compilation => {});
  }
}

module.exports = PluginDemo;

const PluginDemo = require('./PluginDemo');

module.exports = {
  plugins: [
    new PluginDemo(options);
  ]
}

/**
 * start--> A{计时器是否为空}
 * A--> |是| B(添加计时器：过了 等待时间 后，执行函数并清除计时器)
 * A--> |否| C(重置计时器)
 * B--> 结束
 * @param {Function} func
 * @param {Integer} wait 毫秒
 */
function debounce(func, wait = 0) {
  if (typeof func !== 'function') {
    throw new TypeError('debounce传入的参数必须是函数');
  }

  let timer = null, curThis = null, curArgs = null;

  function invokeFunc() {
    func.apply(curThis, curArgs);
  }

  function clearTimer() {
    clearTimeout(timer);
    timer = null;
  }

  function addTimer() {
    timer = setTimeout(() => {
      invokeFunc();
      clearTimer();
    }, wait)
  }

  function resetTimer() {
    clearTimer();
    addTimer();
  }

  function debounced(...args) {
    curThis = this;
    curArgs = args;
    if (timer) {
      resetTimer();
    } else {
      addTimer();
    }
  }

  return debounced;
}

/**
 * start--> IF1{计时器是否为空}
 * IF1--> |是| A(执行搜索)
 * A--> B(添加定时器：过了 等待时间 后清除定时器)
 * IF1--> |否| C(清除定时器)
 * C--> B
 * B--> 结束
 */
function debounce(func, wait = 0) {
  if (typeof func !== 'function') {
    throw new TypeError('debounce传入的参数必须是函数');
  }

  let timer = null, curThis = null, curArgs = null;

  function addTimer() {
    timer = setTimeout(() => {
      clearTimer();
    }, wait)
  }

  function clearTimer() {
    clearTimeout(timer);
    timer = null;
  }

  function invokeFunc() {
    func.apply(curThis, curArgs);
  }

  function debounced(...args) {
    curThis = this;
    curArgs = args;

    if (timer) {
      clearTimer();
    } else {
      invokeFunc();
    }

    addTimer();
  }

  return debounced;
}

/**
 * start--> IF1{timer is null?}
 * IF1--> |Yes| A(invoke callback)
 * A--> B(add timer, remove timer after wait ms)
 * B--> end
 * IF1---> |No| end
 * @param {Function} func
 * @param {Integer} wait ms
 */
function throttle(func, wait) {
  let timer = null, curThis = null, curArgs = null;

  function invokeFunc() {
    func.apply(curThis, curArgs);
  }

  function addTimer() {
    timer = setTimout(() => {
      clearTimeout(timer);
      timer = null;
    }, wait);
  }
  
  function throttled(...args) {
    curThis = this;
    curArgs = args;
    if (timer) {
      invokeFunc();
      addTimer();
    }
  }

  return throttled;
}

module.exports = function(source) {
  // source 为 compiler 传递给 `Loader` 的一个文件的原内容
  // 该函数需要返回处理后的内容，这里简单起见，直接把原内容返回了，相当于该 `Loader` 没有做任何转换
  return source;
};

const xml2js = require('xml2js');
const parser = new xml2js.Parser();

module.exports =  function(source) {
  this.cacheable && this.cacheable();
  const self = this;
  parser.parseString(source, function (err, result) {
    self.callback(err, !err && "module.exports = " + JSON.stringify(result));
  });
};

// example.js
module.exports = '这里是 source 模块';

// applySomeModule.js
var source = require('example.js'); 
console.log(source); // 这里是 source 模块

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.xml$/,
        use: ['xml-loader'],
      }
    ]
  },
  resolveLoader: {
    modules: [path.join(__dirname, '/src/loader')]
  },
  devServer: {
    contentBase: './dist',
    overlay: {
      warnings: true,
      errors: true
    },
    open: true
  }
}

import data from './foo.xml';

function component() {
  var element = document.createElement('div');
  element.innerHTML = data.note.body;
  element.classList.add('header');
  console.log(data);
  return element;
}

document.body.appendChild(component());

ules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true
      }
    }],
  }]

const loaderUtils = require('loader-utils');
module.exports = function(source) {
  // 获取到用户给当前 Loader 传入的 options
  const options = loaderUtils.getOptions(this);
  return source;
};

{
  test: /\.js$/
  use: [
    {
      loader: path.resolve('path/to/loader.js'),
      options: {/* ... */}
    }
  ]
}

module.exports = {
  resolveLoader:{
    // 去哪些目录下寻找 Loader，有先后顺序之分
    modules: ['node_modules','./loaders/'],
  }
}

module.exports = function(source) {
  // 关闭该 Loader 的缓存功能
  this.cacheable(false);
  return source;
};

module.exports = function(source) {
    // 在 exports.raw === true 时，Webpack 传给 Loader 的 source 是 Buffer 类型的
    source instanceof Buffer === true;
    // Loader 返回的类型也可以是 Buffer 类型的
    // 在 exports.raw !== true 时，Loader 也可以返回 Buffer 类型的结果
    return source;
};
// 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据 
module.exports.raw = true;

module.exports = function(source) {
    // 告诉 Webpack 本次转换是异步的，Loader 会在 callback 中回调结果
    var callback = this.async();
    someAsyncOperation(source, function(err, result, sourceMaps, ast) {
        // 通过 callback 返回异步执行后的结果
        callback(err, result, sourceMaps, ast);
    });
};