运行webpack-dev-server脚本提示无可用默认脚本块格式错误如何解决？

错误原因 #

• webpack 5 会自动读取项目browserslist配置推断编译目标环境，当前配置同时包含了浏览器环境和Node.js环境（配置中的maintained node versions项），webpack无法自动判定应该使用浏览器端的JSONP chunk格式还是Node端的CommonJS chunk格式，因此抛出该错误。
• 该项目为运行在浏览器的2D游戏，不需要兼容Node.js环境，冗余的Node兼容配置是问题根源。

修复方案 #

方案1：修改browserslist配置（最适配项目场景） #

删除package.json中browserslist数组里的"maintained node versions"项，修改后配置如下：

"browserslist": [
  "last 1 version",
  "> 1%",
  "not dead"
]

修改后重启服务即可正常运行。

方案2：手动指定webpack target配置 #

若需要同时兼容多环境，可在webpack.common.js中显式指定target为web浏览器环境：

// webpack.common.js 中添加配置
module.exports = {
  // 原有配置保持不变
  target: 'web',
  // 其他配置保留
}

方案3：手动指定chunkFormat参数 #

也可以直接在output配置中指定块格式，浏览器环境适配选jsonp即可：

// webpack.common.js 的output配置中添加
output: {
  path: path.join(__dirname, outputDir),
  filename: "[name].js",
  publicPath: "/dist/",
  chunkFormat: 'jsonp'
},

额外注意事项 #

当前webpack.prod.js配置存在错误，生产环境配置不应该保留devServer、devtool: "inline-source-map"以及mode: "development"配置，需要修改为对应的生产环境配置，避免出现打包产物体积过大、性能降低的问题。

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