用css-loader解析Webpack url()路径

Question

我正在开发一个网站并使用webpack，原因很明显。我遇到的问题是图像的路径分辨率，这些图像是通过SCSS文件导入到我的项目中的。问题是css-loader没有解析正确的路径。似乎正在发生的事情如下：

如果我允许css-loader处理url()导入(将url选项保留为true)，它将重写相对于ExtractCSSChunksPlugin()中指定的输出目录的文件路径，例如：

url('../img/an-image.jpg')应该重写为url('http://localhost:3000/assets/img/an-image.jpg')，然而，实际上输出的是url('http://localhost:3000/assets/css/assets/img/an-image.jpg')。

如果我将其更改为false，则会解析正确的路径，但file-loader无法找到图像并发出它们。

我知道当css-loader处理url解析时会输出图像，因为我可以在编译bundle时看到发出的消息--它不会失败。

如果我在JS入口点手动添加对图像的导入调用，并在entry:字段中设置，然后在SCSS中调用绝对路径，我也可以获得要显示的图像。但这并不可取，因为随着项目的增长，它变得单调乏味。

我尝试过使用resolve-url-loader和更改多个设置，但我似乎就是不能让它工作。

我也尝试过使用由webpack提供的resolve: { alias: { Images: path.resolve(__dirname, 'src/assets/img/' } }选项，然后在我的SCSS中调用url('~Images/an-image.jpg')，但它只是重现了相同的结果。

所以，总的来说，我的问题是我需要能够在我的SCSS中使用相对路径，然后让我的一个加载器将它们重写为正确的路径。

我目前的webpack配置(使用文件加载器输出文件，但在url的开头加上assets/css/ )如下：

"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                  }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: ExtractCSSChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                          }
                    }
                ]
            },
            {
                test: /\.html$/,
                use:['html-loader']
            },
            {
                test:/\.(svg|jpg|png|gif)$/,
                use: [{
                    loader:'file-loader',
                    options: {
                        publicPath: 'assets/img',
                        outputPath: 'assets/img',
                        name: '[name].[ext]',
                        esModule: false
                    }
                }],
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractCSSChunksPlugin({
            filename: 'assets/css/[name].css',
            chunkFilename: 'assets/css/[id].css',
        }),
    ]
});

提前谢谢你。

Answer 1

好了，看起来我已经通过解析文件加载器配置字段publicPath: path.resolve(__dirname, '/assets/img')中设置的publicPath修复了这个问题。

我的配置现在是：

"use strict";
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const path = require('path');
const ExtractCSSChunksPlugin = require('extract-css-chunks-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    devtool: 'inline-source-map',
    entry: [
        'webpack-hot-middleware/client',
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                  }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: ExtractCSSChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                          }
                    }
                ]
            },
            {
                test: /\.html$/,
                use:['html-loader']
            },
            {
                test:/\.(svg|jpg|png|gif)$/,
                use: [{
                    loader:'file-loader',
                    options: {
                        publicPath: path.resolve(__dirname, '/assets/img'),
                        outputPath: 'assets/img',
                        name: '[name].[ext]',
                        esModule: false
                    }
                }],
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractCSSChunksPlugin({
            filename: 'assets/css/[name].css',
            chunkFilename: 'assets/css/[id].css',
        }),
    ]
});

Answer 2

我认为在webpack的配置中添加url加载器会有所帮助。

{
  test: /\.(jpg|png)$/,
  use: {
    loader: "url-loader",
    options: {
      limit: 25000,
    },
  },
},