Webpack Plugin

前言

• Loader 负责完成项目中各种各样的资源的加载，从而实现项目的模块化
• Plugin 负责解决项目中处了资源模块以外的其他自动化工作。Webpack 插件机制的目的是为了增强 Webpack 在项目自动化构建方面的能力。

插件机制的工作原理
Webpack 为每一个工作环节都预留了合适的钩子，我们在扩展时只需要找到合适的时机去做合适的事情就可以了。

钩子机制也特别容易理解，它有点类似于 Web 中的事件。在 Webpack 整个工作过程会有很多环节，为了便于插件的扩展，Webpack 几乎在每一个环节都埋下了一个钩子。这样我们在开发插件的时候，通过往这些不同节点上挂载不同的任务，就可以轻松扩展 Webpack 的能力。

开发 Plugin

注意事项

• Plugin 必须是一个函数或者一个包含 apply 方法的对象。
• 明确 Plugin 的执行时机，将相应的任务挂载到某一个钩子上。

上手

class RemoveCommentsPlugin {
  constructor() {}
  apply (compiler) {
    console.log('RemoveCommentsPlugin 启动');
    compiler.hooks.emit.tap('RemoveCommentsPlugin', (compilation) => {
      for (const name in compilation.assets) {
        if (name.endsWith('.js')) {
          const contents = compilation.assets[name].source();
          const noComments = contents.replace(/\/\*{2,}\/\s?/g, '');
          compilation.assets[name] = {
            source: () => noComments,
            size: noComments.length
          }
        }
      }
    })
  }
}
module.exports = RemoveCommentsPlugin;