如何使用Webpack处理外部模块中的url（...）

debugcn 发表于 Dev

丹尼尔·范·米尔

我具有在外部模块X（node_modules中的另一个包）中定义的样式，例如：

src
- my-module.js
node_modules
- x.js

该模块包含以下内容：

// FIXME: remove disable comment after https://github.com/palantir/tslint/issues/3987 is released
// Fonts and other resources are relative to the module that imports this style module, so calculate the URL
let url = import.meta.url;
url = url.replace(url.split("/").pop(), "");
/* tslint:enable */
// See also issue #1433 about font loading
export let typo = `

@font-face {
    font-family: 'HelveticaNeueLTStd-Roman';
    src: url('${url}/../../../fonts/Helvetica_Neue/398D5F_0_0.woff2')  format('woff2');
};

如何使webpack处理/处理url()内容，以便webpack替换url并将图像/字体等复制到输出目录？我知道在加载的CSS中执行相同的逻辑，但是在我的用例中，样式包含在JS模块中。

谢谢。

编码器

不要这样试图使Webpack足够智能以在JS文件中找到每个字符串（以后可能用作内联样式）没有任何意义。

相反，您应该使用复制插件将依赖项的资产移动到预期的位置。例如，我使用一个名为的包cesium，在我的配置中，我有类似

import CopyPlugin from "copy-webpack-plugin";

export const cesiumSource = resolve("./node_modules/cesium/Source");
export const cesiumTarget = "CesiumStatic";

module.exports = {
    // ...
    plugins: [
        new CopyPlugin({
            patterns: [{
                from: join(cesiumSource, "Assets"),
                to: cesiumTarget + "/Assets",
            }]
        })
    ]
}

这会将整个资产树复制到./dist/CesiumStatic/Assets。程序包在运行时提供了一种机制，告诉它期望资产位于何处，并使用我给它的路径为字体，JSON数据，图像等构建URL。

您的依赖项看起来像是不太可配置的，只是希望它包含在中/fonts/。您需要设置一个CopyPlugin以从字体文件的存储位置（大概是./node_modules/x/fonts/？）获取字体文件，并将其放置在构建目录中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。