Webpack未将资源打包进bundle.js的问题求助

问题核心 #

Webpack仅会识别通过import/require显式引入的资源，而你通过sb-edit转换的Scratch代码中，资源是通过字符串形式传递相对路径（如"./Button4/costumes/button4-a.svg"），Webpack无法解析这类字符串中的资源路径，导致资源未被打包，前端请求时从当前页面域名（localhost:5503）加载不存在的资源，出现404错误。

无需修改原代码的解决方案 #

方案1：用string-replace-loader替换路径为Webpack可识别的引入格式 #

通过该loader在Webpack处理JS文件时，自动将代码中的字符串路径替换为require()调用，让Webpack识别并打包资源。

1. 安装依赖

npm install string-replace-loader --save-dev

2. 修改webpack.config.js的JS loader规则

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'string-replace-loader',
            options: {
              // 匹配你的资源构造函数调用（根据实际代码调整正则）
              search: /new Costume\("([^"]+)", "(\.\/[^"]+)"\)|new Sound\("([^"]+)", "(\.\/[^"]+)"\)/g,
              replace: (match, costumeName, costumePath, soundName, soundPath) => {
                if (costumePath) {
                  return `new Costume("${costumeName}", require("${costumePath}"))`;
                } else if (soundPath) {
                  return `new Sound("${soundName}", require("${soundPath}"))`;
                }
                return match;
              },
              flags: 'g'
            }
          }
        ]
      },
      // 保留原资源规则，调整输出路径避免混乱
      {
        test: /\.(png|svg|jpg|jpeg|gif|mp3|wav)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      },
    ]
  }
}

方案2：用copy-webpack-plugin复制资源+配置publicPath #

手动复制所有资源到Webpack输出目录，并设置publicPath让前端从后端域名加载资源。

1. 安装依赖

npm install copy-webpack-plugin --save-dev

2. 修改webpack.config.js

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // 设置为后端托管bundle和资源的根路径
    publicPath: 'http://localhost:5000/api/v1/scratch/'
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        // 复制所有Sprite下的costumes和sounds目录到dist对应位置
        { from: './**/costumes', to: './[path]' },
        { from: './**/sounds', to: './[path]' }
      ]
    })
  ]
}

注意事项 #

• 方案1的正则表达式需根据你代码中实际的资源构造函数（如new Costume、new Sound）调整，确保覆盖所有资源路径。
• 方案2需保证后端托管dist目录时，资源的目录结构与原项目一致，否则仍会出现404。
• 若资源体积较小，可将资源规则的type设为asset/inline，直接将资源转为base64嵌入bundle，避免额外请求，但会增大bundle体积。

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