Webpack+Less+Source Map路径异常：如何显示相对路径？

Hey there, let's tackle that annoying absolute path issue in your Less source maps. The problem here is that by default, the less-loader/css-loader combo outputs full absolute paths for your Less files in the source map, while other modules use clean relative paths. Here are two straightforward fixes:

Solution 1: Global Path Rewrite (Recommended) #

Add a top-level Webpack config option to rewrite all source map file paths to be relative to your project root. This works for all modules, not just Less files, so it keeps things consistent:

const path = require('path');

module.exports = {
  // ... your existing config
  devtool: 'inline-source-map',
  // Add this line to convert absolute paths to relative
  devtoolModuleFilenameTemplate: info => path.relative(__dirname, info.absoluteResourcePath),
  // ... rest of your config
};

This takes every absolute resource path and converts it to a path relative to where your webpack.config.js lives—perfect for keeping your source map paths clean and project-relative.

Solution 2: Targeted CSS/Less Adjustment #

If you only want to fix paths for Less/CSS files, tweak the css-loader options to anchor source maps to your project root:

{
  loader: 'css-loader',
  options: {
    sourceMap: true,
    // Set root to your project directory
    sourceMapRoot: path.resolve(__dirname),
    // Force relative paths from the root
    sourceMapUrl: true,
    sourceMapFilename: '[file].map'
  }
}

That said, the first solution is simpler and ensures all your modules use the same path format.

Updated Full Config Example #

Here's what your config looks like with the recommended global fix applied:

const path = require('path');

module.exports = {
  entry: ['./app.js'],
  devtool: 'inline-source-map',
  devtoolModuleFilenameTemplate: info => path.relative(__dirname, info.absoluteResourcePath),
  output: {
    filename: 'bundle.js',
    path: path.resolve('./dist'),
  },
  resolve: {
    alias: { app: './' }
  },
  module: {
    rules: [{
      test: /\.(less)$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: { sourceMap: true }
        },
        {
          loader: 'less-loader',
          options: { sourceMap: true }
        }
      ],
    }]
  },
  mode: 'none'
};

Rebuild your project after updating the config, and your Less files should now show relative paths instead of full absolute paths in the source map.

内容的提问来源于stack exchange，提问作者xarizmat