webpack 转换/替换 css url

【问题标题】：webpack transform/replace css urlwebpack 转换/替换 css url
【发布时间】：2018-03-16 18:24:17
【问题描述】：

我正在使用带有 css-loader、style-loader 和 ExtractTextPlugin 的 webpack 来生成 css 文件。

我想替换那些 CSS 文件中使用的某些 URL。

例如：

url('../fonts/icomoon.ttf?asbl3h') 
url('../../fonts/whatever.ttf?asbl4h')

应该变成

url('fonts/icomoon.ttf?asbl3h')
url('fonts/whatever.ttf?asbl4h')

字体不一定在正确的相对文件夹中。我正在使用 webpack 生成带有插件的 css 以将所有字体复制到某个文件夹。

最好的方法是什么？

作为后备，只执行字符串替换就可以了。

【问题讨论】：

标签： webpack webpack-2

【解决方案1】：

当然不确定这是否是最好的方法，但对于那些不得不依赖字符串替换的人来说，这里是我如何使用string-replace-loader 解决类似问题并为文件定义特殊规则的概述需要修改的：

  module: {
    rules: [
      {
        test: REGEX_MATCHING_ONLY_FILES_TO_BE_MODIFIED,
        use: [
          {
            loader: 'string-replace-loader',
            options: {
              search: "url\\('\(.*)fonts/", // these regular expressions should work for the example paths in the question
              replace: 'url(fonts/\1)',
              flags: 'g',
            }
          },
          // any other loaders you need, e.g. css-loader //
        ],
      },
    ],
  }

（致谢：jakenuts'对webpack-contrib#27 的回复让我走上了正轨。）

【讨论】：