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

background: url(../../images/pic.jpg)

resolve-url-loader正确地将其解析为../images/pic.jpg，css-loader找到该文件，并调用该文件的加载器（file-loader）。但是，我不想将文件复制到dist /中（我通过向文件加载器中添加emitFile: false来完成此操作），而不想重写CSS输出（../assets/images/pic.jpg中的url）。我该怎么做？

作为参考，这是我的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并将css-loader保留在url：false上。然后，只需编写URL路径即可，就可以在输出文件中使用它们了。

我可能会接受并捆绑我的图片。

将url（）解析为图像而不进行捆绑

1 个答案: