webpack - Webpack 文件加载器调整公共路径

Question

我的图像文件夹有以下内容：

module.exports = {
        test: /\.(png|jpe?g|gif|svg)$/,
        include: config.paths.images, // this is: path.resolve(__dirname, '../assets/images')
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]',
            publicPath: '../',
        }
    };

这就是我的 CSS 的输出：background-image: url(../images/assets/images/doctor-results/g-map-location.png);

我需要的是路径：background-image: url(../images/doctor-results/g-map-location.png);

基本上从路径中删除前 2 个目录，同时保持相对。

Answer 1

您可以使用字符串替换加载器

yarn add --dev string-replace-loader

在加载器加载的内容中执行替换（普通表达式和正则表达式）。

      {
        test: /\.css$/,
        use: [
          // ...
          {
            loader: 'string-replace-loader',
            options: {
              search: 'assets/images/',
              replace: '',
              flags: 'g'
            },
          },
        ],
      },

Answer 2

我最终使用split而splice不是添加另一个库。

{    
    options: {
        name: config.outputs.image.filename,
        publicPath: (url) => {
            const pathArray = url.split('/');
            pathArray.splice(0, 2);
            const path = pathArray.join('/');
            return `../${path}`;
        },
        emitFile: false
    }
}