如何使用Parcel构建工具控制输出文件的位置与命名？

针对你提到的将projectroot/src/js/index.js输出至projectroot/dist/js/bundle.js的需求，Parcel 2提供了两种简单可行的配置方式：

1. 通过package.json的targets字段配置（推荐） #

这是Parcel 2官方推荐的自定义输出方式，适合长期维护的项目，配置更清晰。在项目根目录的package.json中添加targets字段：

{
  "name": "your-project-name",
  "targets": {
    "main": {
      "source": "src/js/index.js",
      "distDir": "dist/js",
      "outputFile": "bundle.js"
    }
  },
  "scripts": {
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "^2.12.0"
  }
}

配置说明：

• source：指定要打包的入口文件路径
• distDir：指定输出目录的根路径（这里设置为dist/js，最终文件会放在这个目录下）
• outputFile：自定义输出的文件名（这里直接指定为bundle.js）

配置完成后，执行npm run build即可得到目标文件。

2. 命令行参数直接指定 #

如果只是临时需求或者快速测试，可以直接在build命令中通过参数指定输出规则：

parcel build src/js/index.js --dist-dir dist/js --out-file bundle.js

参数说明：

• --dist-dir：指定输出目录
• --out-file：自定义输出的文件名

如果不需要source map，可以额外添加--no-source-maps参数减少打包体积。

注意事项 #

• 确保你使用的是Parcel 2的最新稳定版本，旧版本可能存在配置参数差异
• 如果有多个入口文件，可以在targets中添加多个配置项，分别指定不同的输出规则

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