Question

我尝试使用文件加载程序处理图像并将它们包含在我的构建文件夹中。

html文件中的图像出现在构建中，但样式中的图像不出现。

我将我的webpack配置分成2个文件并使用webpack merge模块合并它们。

这是我配置css处理的方式：

exports.loadCSS = function (paths) {
    return {
        module: {
            rules: [{
                test: /\.scss$/,
                include: paths.app,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            root: paths.root
                        }
                    },
                    'postcss-loader',
                    'sass-loader'
                ]
            }]
        }
    };
};

这是文件加载器配置：

            {
                test: /\.(jpg|png|svg)$/,
                loader: 'file-loader?name=[path][name].[hash].[ext]'
            }

一块scss：

.img-from-styles {
  width: 100px;
  height: 100px;
  background: url('/imgs/imgInStyles.jpg');
}

此处project本身包含完整配置

Answer 1

您需要使用url-loader 安装

npm install url-loader --save-dev

如何使用

{
    test: /\.(png|jpg|jpeg|gif)$/,
    loader: 'url-loader?limit=10000'
 }

现在，webpack将能够从您的样式中解析您的网址

<强>更新

Webpack（css-loader）需要精确的文件路径，以便它可以为您解析文件或网址。

如何使用webpack包含来自CSS（背景等）的图像来构建文件夹？

1 个答案: