如何在JavaScript开发的Moodle活动插件中通过webpack资产管理导入图片

你遇到的路径错误核心原因是webpack默认生成的资源相对路径，是相对于访问页面的路径而非js文件本身的存放路径。你当前的view.php存放在插件根目录/mod/assessmenttool/，而打包后的js和资源文件存放在/mod/assessmenttool/tasks/dist/，未配置publicPath的前提下，webpack生成的相对路径会从view.php所在目录请求资源，自然返回404。

方案1：配置固定publicPath（适合固定部署场景） #

直接在webpack配置中指定资源的公共访问前缀，修改webpack.config.js的output配置即可：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    test: './src/test.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // 新增这一行，填写你的dist目录对应的站点绝对路径
    publicPath: '/mod/assessmenttool/tasks/dist/'
  },
  // 剩余配置保持不变
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

配置完成后重新执行打包命令，webpack生成的所有资源路径都会自动加上该前缀，路径即可匹配。

方案2：动态设置publicPath（适合多环境部署场景） #

如果你的插件需要在不同Moodle站点部署，不想写死路径，可以通过Moodle全局变量动态注入资源路径：

1. 先在view.php中引入js之前，输出全局资源路径变量：

// 在调用$PAGE->requires->js()之前插入
global $CFG;
echo html_writer::script('window.ASSESSMENT_TOOL_ASSET_URL = "'.$CFG->wwwroot.'/mod/assessmenttool/tasks/dist/";');

2. 在你的webpack入口文件（test.js）的最顶部添加动态publicPath配置：

__webpack_public_path__ = window.ASSESSMENT_TOOL_ASSET_URL;
// 后续的导入、业务逻辑写在这行之后
import fullScreenButtonIcon from '../../assets/icon/fullscreen.png';

打包后打开页面，查看导入的图片变量fullScreenButtonIcon的值，应为/mod/assessmenttool/tasks/dist/[hash].png格式，请求即可正常返回200。

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