Question

我使用Webpack加载SVG图标。大多数图标都有一些与之关联的CSS。我想将每个图标的样式保留在单独的文件中。因此，如果导入了图标，则需要一种方便的方法将其包含在CSS捆绑包中。例如

import arrowIcon from 'icons/arrow.svg'

必须：

1）使用我的SVG加载器加载'icons / arrow.svg'

2）使用我的CSS加载器加载“ icons / arrow.svg.css”

我的尝试

我可以为此使用multi-loader，但是我不知道如何修改资源路径arrow.svg => arrow.css来将其传递给CSS加载器。我可以为此使用NormalModuleReplacementPlugin，但它似乎修改了两个加载程序的路径。另外，我可以编写自己的加载器来修改路径并调用CSS加载器，但不知道如何在加载器内部正确执行加载器

Answer 1

This的答案帮助我编写了插件

const CommonJsRequireDependency = require("webpack/lib/dependencies/CommonJsRequireDependency");
const fs = require('fs');
const path = require('path');

function LinkedModulePlugin(options) {
    this.options = options;
}

LinkedModulePlugin.prototype.apply = function(compiler) {
    compiler.hooks.compilation.tap('LinkedModulePlugin', compilation => {
        compilation.hooks.succeedModule.tap('LinkedModulePlugin', module => {
            const { resource } = module;
            const { test, linkedModule } = this.options;
            if (test instanceof RegExp && test.test(resource) ||
                typeof test === 'function' && test(resource)) {
                const linkedModulePath = linkedModule(resource);

                if (fs.existsSync(linkedModulePath)) {
                    const relPath = path.relative(module.context, linkedModulePath);
                    module.dependencies.push(new CommonJsRequireDependency('./' + relPath, null))
                }
            }
        });
    });
};

module.exports = LinkedModulePlugin;

用法示例：

// Webpack config
const LinkedModuleWebpackPlugin = require('./path/to/linked-module-webpack-plugin');

// ...

plugins: [
    new LinkedModuleWebpackPlugin({
        test: /\.svg$/,
        linkedModule: (resource) => resource + '.css'
    })
]

无论如何，使用 loader 能够做到这一点非常好。

使用一次导入加载多个模块

1 个答案: