Webpack 4 devtool选项与webpack-dev-server配合失效问题求助

Hey there, let’s troubleshoot why your source maps aren’t playing nice with Webpack 4.6.0 and webpack-dev-server 3.1.3. I’ve dealt with similar quirks in these exact versions before, so here are some practical fixes to try:

1. Check for webpack-dev-server configuration conflicts #

webpack-dev-server has some finicky behavior with source maps in older versions. Make sure you aren’t indirectly overriding your devtool setting in the devServer section:

• Avoid setting inline: false if you’re using source-map or inline-source-map—these combinations often break source map delivery.
• If you’ve enabled devServer.hot, ensure you’ve added HotModuleReplacementPlugin to your plugins array. Missing this plugin can disrupt source map generation.

2. Validate your output settings #

Even with devtool: 'source-map', your output config might block source maps from being generated or served:

• Don’t set output.pathinfo: false—this disables metadata that helps Webpack link bundles to source maps.
• Verify output.sourceMapFilename is either using the default or set to a path the dev server can access. A safe setup looks like this:

output: {
  filename: '[name].bundle.js',
  sourceMapFilename: '[name].bundle.js.map'
}

3. Clear cache and do a clean rebuild #

Older Webpack versions love holding onto cached artifacts that mess with source maps. Here’s what to do:

• Stop the dev server completely.
• Delete the node_modules/.cache folder (it’s a hidden cache Webpack uses for builds).
• Restart the dev server and let it rebuild from scratch.

4. Rule out conflicting plugins #

Some plugins can strip or corrupt source maps without you realizing it:

• If you’re accidentally using UglifyJsPlugin in dev mode (easy to do if configs are merged), it will minify code and break source maps. Double-check your plugins array for production-only tools in your dev config.
• Disable any custom plugins one by one to see if one is causing the conflict.

5. Test with a minimal reproduction project #

Sometimes your project’s complexity hides the issue. Create a tiny test project to isolate the problem:

1. Initialize npm, then install webpack@4.6.0 and webpack-dev-server@3.1.3.
2. Make a src/index.js file with a simple function that throws an error (e.g., function breakMe() { throw new Error("Test error"); } breakMe();).
3. Set up a basic webpack config with just devtool: 'source-map' and an entry point.
4. Run webpack-dev-server and check if the source map works in your browser’s dev tools.

If this works, start adding parts of your original config one by one until the source maps break—this will help you find the exact culprit.

6. Double-check browser dev tool settings #

Don’t forget the browser side! In Chrome DevTools:

• Go to Settings > Experiments and ensure "Enable JavaScript source maps" is checked.
• In the Sources tab, make sure you aren’t filtering out source maps or using a workspace that’s overriding them.

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