如果把 webpack 当成一个垃圾工厂，loader 就是垃圾分类，将所有垃圾整理好交给 webpack。plugin 就是如何去处理这些垃圾。
webpack 插件写起来很简单，就是你要知道各种各样的钩子在什么时候触发，然后你的逻辑写在钩子里面就 ok 了
- apply 函数是 webpack 在调用 plugin 的时候执行的，你可以认为它是入口
- compiler 暴露了和 webpack 整个生命周期相关的钩子
- Compilation 暴露了与模块和依赖有关的粒度更小的事件钩子
本节概要
- 实现一个 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"
}
]);
};
};
