Skip to content

ldstein/webpack-sourcemap-test

Repository files navigation

SourceMap out of alignment when referencing external modules

This is a demo of how defining external modules affects sourcemaps generated by Webpack.

This problem specifically occurs when:

  • devtool is set to cheap-module-source-map
  • AND Modules are defined as external
  // webpack.config.js
  {
      ...
      devtool: 'cheap-module-source-map',
      external: {jquery: 'jQuery'},
      ...
  }

When a module is defined as external, a single character in the generated sourcemap is causing a misalignment in the Chrome debugger

Screenshot of Debugger

Testing environment:

  • Chrome v58.0.3029.81
  • MS Windows 10 Pro 14393.1066
  • Chrome debugger cache disabled (debugger network tab > Disable cache checked)

Installation

  1. npm install to install the dependencies (webpack and webpack-dev-server)

Compare difference between build with external modules and one without

  1. npm run compare

This will generate two identical build.js files, one with external modules and one without.

It will then compare the checksums of their corresponding js bundles and sourcemaps and report any differences it finds.

Screenshot of Debugger

Test Webpack config with no externals defined

  1. npm run serve to start webpack-dev-server
  2. Open http://localhost:8080/good.html in Chrome
  3. Open Debugger (F12)
  4. Refresh (F5)
  5. Debugger will stop at debugger; (expected behaviour).

Screenshot of Debugger

Test Webpack config with externals defined

  1. npm run serve to start webpack-dev-server
  2. Open http://localhost:8080/bad.html in Chrome
  3. Open Debugger (F12)
  4. Refresh (F5)
  5. Debugger is one line out of alignment (unexpected behaviour).

Screenshot of Debugger

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published