使用@wordpress/scripts添加自定义JS文件执行build报错如何解决

你使用的@wordpress/scripts v18+版本调整了多入口的参数传递规则，旧版本直接追加多个文件路径的写法已不被支持，因此会触发entry识别错误。

方法1：直接调整build命令参数 #

直接修改package.json的scripts配置，给每个入口加上--entry标志并指定入口名：

"scripts": {
  "start": "wp-scripts start --entry index=./src/index.js --entry admin=./src/index-admin.js",
  "build": "wp-scripts build --entry index=./src/index.js --entry admin=./src/index-admin.js"
}

修改后重新执行npm run build即可正常编译，最终会在build目录生成index.js、admin.js两个入口对应的产物。

方法2：自定义webpack配置（更推荐，易维护） #

如果后续还有新增入口、调整编译规则的需求，建议用自定义配置的方式：

1. 在项目根目录新建webpack.config.js文件，写入以下内容：

// 引入@wordpress/scripts默认配置，避免破坏原有适配逻辑
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  entry: {
    // 按 入口名: 入口文件路径 的格式添加即可，新增入口直接在这里加
    index: './src/index.js',
    admin: './src/index-admin.js'
  }
};

2. 将package.json的scripts改回默认写法即可：

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}

• 如果你需要编译scss资源，直接在对应的js入口文件中导入scss即可，例如在index.js中添加import './style.scss'，wp-scripts会自动抽离出独立的css文件到输出目录。
• 编译产物默认输出到项目根目录的build文件夹，有自定义输出路径需求的话，可以在webpack配置中追加output字段调整。

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