javascript - 将 url() 解析为图像而不捆绑

Question

我正在将 Webpack 集成到一个已经建立的前端环境中。 Sass 和 resolve-url-loader 正在运行，Webpack 找到 CSS 中的 url() 引用的文件。我的问题是，我不想将 url() 引用的文件复制到 dist/文件夹中，我想链接到它们所在的位置。

我的文件是这样设置的

www/
  index.html
  assets/
    js/
      main.js
    css/
      main.scss
      components/
        thing.scss
    images/
      pic.jpg
  dist/
    output.js
    output.css

使用 main.scss 导入包含行的 thing.scss

背景:url(../../images/pic.jpg)

resolve-url-loader 正确地将其解析为 ../images/pic.jpg 并且 css-loader 找到文件并调用文件的加载器 (file-loader)。但是，我不想将文件复制到 dist/(我通过将 emitFile: false 添加到文件加载器来做到这一点)并重写 url 使其与 CSS 输出相关( ../assets/images/pic.jpg)。我该怎么做？

作为引用，这是我的 webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

{
    entry: './assets/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'output.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader, {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                        url: false
                    }
                }, {
                    loader: "resolve-url-loader",
                    options: {
                        debug: true,
                        sourceMap: true
                    }

                }, {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                        sourceMapContents: false
                    }
                }
            ]
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    emitFile: false
                }
            }]
        }]
    },
    plugins: [new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    })],

}

Answer 1

不是最佳答案，但它有效。

移除 resolve-url-loader 并在 url:false 上保留 css-loader。然后只需编写您的 URL 路径，因为它们可以在输出文件中使用。

不过我可能会接受它并捆绑我的图像。