【webpack】如何修改打包后的文件名称及输出目录

场景举例

比如：我想将下图中的src目录下的500.jsx文件打包后输出到dist目录下500文件夹下名为50x.html.

下面将以注册插件的方式来完成此功能。

---

第一步：修改webpack配置

修改的位置是：config.js

我们先注册一个插件MyPlugin，具体的方法如下代码所示：

const MyPlugin = require("./MyPlugin"); //导入插件

export default {

    chainWebpack: (config) => {
        config.plugin("MyPlugin").use(MyPlugin); //注册并使用插件
    },
};

---

第二步，插件的具体代码逻辑

我的思路是：

首先监听webpack打包后的时机，而这个钩子函数是done.正常打包时将500.jsx文件打包到dist下的500文件夹下名称为index.html。于是，我先使用copySync方法复制一份index.html，复制后的文件叫50x.html，此时目录下有两个文件，我们再使用unlink删除index.html就完事了。

ps:我使用了setTimeout异步是因为copySync是异步的。

自己注册的插件具体的代码如下： 

const isProduction = process.env.NODE_ENV === "production"; // 判断是否是生产环境

class MyPlugin {
    apply(compiler) {
        // 在 webpack 构建过程中，执行一些操作
        compiler.hooks.done.tap("MyPlugin", () => {
            console.log("MyPlugin is done.");
            if (isProduction) { //如果是生产环境
                const fs = require("fs-extra");//导入node.js的api
                const fs2 = require("fs"); //导入node.js的api
                setTimeout(() => {
                    //copySync(起始文件路径，目标目录路径)功能：复制文件
                    fs.copySync("./dist/500/index.html", "./dist/500/50x.html");
                    // fs.copySync("./src/pages/500.jsx", "./dist/500/50x.html");
                    //unlink('要删除的路径'，回调函数)；功能：删除文件
                    fs2.unlink("./dist/500/index.html", (err) => {
                        console.log("文件已成功删除");
                    });
                }, 500);
            }
        });
    }
}

module.exports = MyPlugin;