如何在Shopware 6.4插件构建流程中导入NPM包资源？

问题分析 #

你的现有webpack配置存在两个核心问题：

1. 直接返回全新的webpack配置对象，覆盖了Shopware Administration默认的webpack规则，导致原有资源处理逻辑失效
2. file-loader仅会处理代码中显式导入的图片资源，但Leaflet的图片是通过CSS中的相对路径引用的，webpack未自动捕获这些引用

方案一：扩展现有webpack配置，处理CSS中的图片引用 #

修改你的webpack配置文件，改为扩展Shopware传入的config对象，而非替换它：

// myPlugin/src/Resources/app/administration/build/webpack.config.js
const { join, resolve } = require('path');

module.exports = ({ config }) => {
    // 添加Leaflet别名
    config.resolve.alias['@leaflet'] = resolve(join(__dirname, '..', 'node_modules', 'leaflet'));

    // 找到已有的图片处理规则，或添加新规则（避免覆盖默认规则）
    const imageRule = config.module.rules.find(rule => rule.test.test('.png'));
    if (imageRule) {
        // 修改现有规则的输出路径
        imageRule.options.name = '../../public/administration/css/images/[name].[ext]';
    } else {
        // 若没有则添加新规则
        config.module.rules.push({
            test: /\.(png|jpe?g|gif)$/i,
            loader: 'file-loader',
            options: {
                name: '../../public/administration/css/images/[name].[ext]',
            }
        });
    }

    // 确保CSS loader能正确解析Leaflet CSS中的图片路径
    config.module.rules.forEach(rule => {
        if (rule.test.test('.css')) {
            // 为css-loader添加url解析配置
            rule.use.forEach(use => {
                if (use.loader === 'css-loader') {
                    use.options = use.options || {};
                    use.options.url = true; // 确保解析CSS中的url()引用
                }
            });
        }
    });

    return config;
};

同时，在你的插件入口JS中显式导入Leaflet的CSS，让webpack能解析其中的图片引用：

// 比如在main.js中
import '@leaflet/dist/leaflet.css';

方案二：使用copy-webpack-plugin直接批量复制图片 #

如果方案一仍不生效，可直接用copy-webpack-plugin在构建时复制Leaflet的图片资源，这是更直接的批量处理方式：

1. 先安装插件：

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

2. 修改webpack配置：

// myPlugin/src/Resources/app/administration/build/webpack.config.js
const { join, resolve } = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = ({ config }) => {
    // 添加Leaflet别名
    config.resolve.alias['@leaflet'] = resolve(join(__dirname, '..', 'node_modules', 'leaflet'));

    // 添加CopyWebpackPlugin插件
    config.plugins.push(
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: resolve(join(__dirname, '..', 'node_modules', 'leaflet', 'dist', 'images')),
                    to: resolve(join(__dirname, '..', '..', '..', '..', 'public', 'administration', 'css', 'images'))
                }
            ]
        })
    );

    return config;
};

验证步骤 #

1. 执行插件构建命令：./psh.phar administration:build（或对应Shopware构建命令）
2. 检查mypluginbundle/administration/css/images/目录下是否已存在Leaflet的png图片
3. 确保Leaflet的CSS中图片的引用路径与输出路径匹配（若路径仍有问题，可调整to参数或CSS中的路径）

内容的提问来源于stack exchange，提问作者Jürgen Hörmann