如何在Webpack中为WordPress插件配置不同JS输出目录？

问题场景 #

你的WordPress插件目录结构如下：

/public/
  /js/
    /modules/
    /public.bundled.js // 目标输出位置
/admin/
  /js/
    /modules/
    /admin.bundled.js // 目标输出位置

你需要将Webpack打包后的文件分别输出到对应目录，现有配置中output.path不知道如何设置：

const path = require("path");
module.exports = {
  entry: {
    public: __dirname + "/public/js/modules/public.js",
    admin: __dirname + "/admin/js/modules/admin.js",
  },
  output: {
    filename: "[name].bundled.js",
    path: // 待配置
  },
  mode: "development",
  watch: true,
};

解决方案 #

要实现不同入口文件输出到对应目录，不需要给path设置多个路径，而是通过动态文件名配置来指定输出的相对路径，具体修改如下：

const path = require("path");
module.exports = {
  entry: {
    // 推荐用path.resolve替代字符串拼接，适配不同系统路径分隔符
    public: path.resolve(__dirname, "public/js/modules/public.js"),
    admin: path.resolve(__dirname, "admin/js/modules/admin.js"),
  },
  output: {
    // 利用[name]动态匹配入口名，拼接目标目录路径
    filename: "[name]/js/[name].bundled.js",
    // 输出根目录设为项目根目录
    path: __dirname,
    // 禁用自动清理，避免误删原有目录下的其他文件
    clean: false,
  },
  mode: "development",
  watch: true,
};

原理说明 #

• filename中的[name]会自动替换为你在entry中定义的键名（public或admin），因此最终输出路径会自动拼接为：
  • public入口：/public/js/public.bundled.js
  • admin入口：/admin/js/admin.bundled.js
• 使用path.resolve可以避免因Windows和Unix系统路径分隔符不同导致的错误，比直接字符串拼接更可靠。

内容的提问来源于stack exchange，提问作者Sackadelic