• 欢迎访问新概念博客,研究javascript,css3,html5,nodejs,Ext js等技术研究,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入新概念博客

webpack复制文件插件实现:手写一个 webpack plugin

代码碎片 新概念 2个月前 (11-29) 143次浏览 0个评论 扫描二维码

如果把 webpack 当成一个垃圾工厂,loader 就是垃圾分类,将所有垃圾整理好交给 webpack。plugin 就是如何去处理这些垃圾。

webpack 工程师的自我修养:手写一个 webpack plugin

webpack 插件写起来很简单,就是你要知道各种各样的钩子在什么时候触发,然后你的逻辑写在钩子里面就 ok 了

  • apply 函数是 webpack 在调用 plugin 的时候执行的,你可以认为它是入口
  • compiler 暴露了和 webpack 整个生命周期相关的钩子
  • Compilation 暴露了与模块和依赖有关的粒度更小的事件钩子

webpack 工程师的自我修养:手写一个 webpack plugin

本节概要

  • 实现一个 CopyPlugin
  • 使用

实现一个 CopyPlugin

我们今天写一个 copy 的插件,在 webpack 构建完成之后,将目标目录下的文件 copy 到另一个目录下

const fs = require("fs-extra");
const globby = require("globby"); // windows 下请使用 glob 替换,用法基本一致

class CopyDirWebpackPlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    const opt = this.options;
    compiler.plugin("done", stats => {
      if (process.env.NODE_ENV === "production") {
        (async () => {
          const toFilesPath = await globby([`${opt.to}/**`, "!.git/**"]);
          // 删除目标文件及其子文件
          toFilesPath.forEach(filePath => fs.removeSync(filePath));
          const fromFilesPath = await globby([`${opt.from}/**`]);
          fromFilesPath.forEach(fromPath => {
            const cachePath = fromPath;
            fromPath = fromPath.replace("dist", opt.to);
            const dirpaths = fromPath.substring(0, fromPath.lastIndexOf("/"));
            fs.mkdirpSync(dirpaths);
            fs.copySync(cachePath, fromPath);
          });
          console.log(`  完成 copy ${opt.from} to ${opt.to}`);
        })();
      }
    });
  }
}

module.exports = CopyDirWebpackPlugin;

 

使用

将打包出来的 dist 目录下的内容 copy 到 dist2 目录下

const CopyPlugin = require("../webapck-plugin-copy");

module.exports = ({ config }) => {
  return () => {
    config.plugin("copy-dist").use(CopyPlugin, [
      {
        from: "dist",
        to: "dist2"
      }
    ]);
  };
};

 


新概念博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:webpack复制文件插件实现:手写一个 webpack plugin
喜欢 (0)
[新概念]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址