[resource-path] in devtoolModuleFilenameTemplate Only Includes File Name

[john-larson]

• Operating System: Windows
• Node Version: 10.13.0
• NPM Version: 6.9.0
• webpack Version: 4.29.6
• css-loader Version: 2.1.1

Expected Behavior

devtoolModuleFilenameTemplate option under the output config parameter in webpack can be configured to determine the names/paths of sourcemap files. Default is 'webpack://[namespace]/[resource-path]?[loaders]'. But I choose not to use this default version and instead just use the [resource-path]. ts-loader creates the correct sourceMaps by just including the relative paths of the source files. I would expect css-loader to respect this too.

Actual Behavior

When [resource-path] is used, css-loader only uses the name of the css file. So, the Chrome dev tools cannot find the actual source file. Using the following also confirms this behavior:

 devtoolModuleFilenameTemplate: (info) => {
       console.log(info.resourcePath)
}

Relevant Part of webpack.config.js

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

module.exports = {
    mode: 'development',
    devtool: "nosources-source-map", 
    output: {
        filename: '[name].js',
        path: __dirname + '/dist',
        devtoolModuleFilenameTemplate: '.[resource-path]' 
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                        }
                    },
                    {
                    loader: 'css-loader',
                    options: {
                        modules: false,
                        sourceMap: true
                    }
                }
                ]
            },
            { test: /.ts$/, use: 'ts-loader' },
        ]
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    }
}

[alexander-akait]

css-loader don't use devtoolModuleFilenameTemplate due postcss generate own maps for css, i think it is duplicate #622