javascript - 在不捆绑的情况下将 url() 解析为图像

问题描述

我正在将 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 其中包含该行

background: 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"
    })],

}

标签： javascriptcsswebpacksassresolve-url-loader

javascript - 在不捆绑的情况下将 url() 解析为图像

问题描述

解决方案

推荐阅读