是否可以从webpack的文件名中删除特殊字符？ [英] Is it possible to strip special characters from filenames in webpack?

问题描述

长话短说，资产文件名中不能包含某些字符，例如连字符。我没有运气通过Webpack文档进行分析，以找出是否可以使用正则表达式或类似名称来重命名文件，因此我可以从不控制源文件名的第3方软件包中删除任何连字符。

Long story short, I cannot have certain characters like hyphens in our asset filenames. I'm not having the best of luck parsing through webpack documentation to figure out if it is possible to rename a file using a regex or something similar so I can strip out any hyphens from 3rd party packages where I do not control the source filename.

我的超级天真示例如下：

My super naive example would be something like this:

{
    test: /\.(ttf|eot|woff|woff2)$/,
    loader: `url-loader?limit=${ASSETS_LIMIT}&name=fonts/[name.replace(/-/)].[ext]`
}

有人知道这是可能或如何满足这一要求？谢谢！

Does anyone know if this is possible or how one would approach this requirement? Thanks!

推荐答案

这个谜语的答案似乎在 customInterpolateName 加载程序选项。使用webpack@v3.4.1，以下是我删除连字符的最终结果。

The answer to this riddle appears to be found in the customInterpolateName loader option. With webpack@v3.4.1 the below was my end result for removing a hyphen.

这是关键提示：

plugins: [
    // ... other plugins ...
    new webpack.LoaderOptionsPlugin({
        options: {
            customInterpolateName: (loaderContext) => {
                return loaderContext.replace(/-/g, '');
            }
        }
    })
]

下面是一个更完整的示例，提供了一些上下文信息（请注意： .css 故意附加到字体文件名中，作为解决Dynamics CRM中另一个Web资源名称限制的解决方法）：

Here's a more complete example to give some context (note: the .css was appended to the font filenames intentionally as a workaround for yet another web resource name restriction in Dynamics CRM):

module.exports = {
    // ... other config ...
    module: {
        loaders: [
            // ... other loaders ...
            {
                test: /\.(ttf|eot|woff|woff2)$/,
                loader: `url-loader?limit=${ASSETS_LIMIT}&name=fonts/[name].[ext].css`
            }
        ]
    },

    plugins: [
        // ... other plugins ...
        new webpack.LoaderOptionsPlugin({
            options: {
                customInterpolateName: (loaderContext) => {
                    return loaderContext.replace(/-/g, '');
                }
            }
        })
    ]
};

这篇关于是否可以从webpack的文件名中删除特殊字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！