Duplicate and corrupted resources

[Moghul]

Node: 9.4.0 File-Loader: 1.1.11 OS: Ubuntu 16.04

Behaviour: I have a .css file referencing some .png files. This .css file is require()'d in files in two different bundles. When I build, the .png files get copied over into my Public directory and the paths to them get resolved as intended.

Except... Each destination file has a broken clone (with a different hash in its name), and it's that broken clone that gets referenced in the .css bundles.

Expected behaviour: Resource is only copied once and it's also not broken.

My setup: My plugin config:

    {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
            fallback: "style-loader?sourceMap",
            use: "css-loader?sourceMap"
        })
    },
    {
        test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: 'resources/[name].[hash].[ext]'
            }
        }]
    }

My style:

#top {
    background: url("../images/bg.menu.png");
    overflow: hidden;
    min-height: 125px;
}

In bundles:

#top {
    background: url(resources/bg.menu.9453a616e9bc9d5be8c46fb82c597ef6.png);
    overflow: hidden;
    min-height: 125px;
}

The files:

Contents of broken 'image' when opened with a Text Editor:

module.exports = __webpack_public_path__ + "resources/bg.menu.ed8874fbc215fd70b31a31ddc48c24a0.png";

Things I've tried: I tried making a common bundle with the shared .css file and that worked but it didn't solve the problem (still cloned, broken files, still referencing broken files)

This also seems to happen when multiple css files are referencing the same resource.

If it turns out I'm just configuring something wrong, let me know so I can fix it.

[alexander-akait]

@Moghul can you create minimum reproducible test repo?

[Moghul]

Uh... Give me some time.

EDIT: I've actually made a change and I might be on the right track. Things don't work yet but... bare with me.

My change:

From:

    {
        test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: 'resources/[name].[hash].[ext]'
            }
        }]
    }

To:

    {
        // Copies required html files into Public with the given name.
        test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
        use: [{
            loader: vendor + '/file-loader',
            options: {
                name: '[name].[hash].[ext]',
                outputPath: '/resources'
            }
        }]
    }

EDIT: Nevermind that just broke things in a different way, let me make that repo.

[Moghul]

Nevermind, it turns out I'm a dumbass.

I have my webpack config file split into a few pieces because most of the configs are the same across multiple projects.

I had added the config for this loader to one of the project-specific configs. Then, I decided to put it in a shared config and forgot to remove it in the project-specific config. That's what was causing everything. How did I miss it, you ask? It was folded by my editor.

If I hadn't wasted an hour on this, I'd be laughing too.