Load debug version of pre-built module via npm/webpack

Question

There is a javascript library, pre-built and available on npm, that I wish to develop with/debug. In my case, it is openlayers.

In the classic way of requiring a javascript file and wanting to debug, one would just switch the script url from the production version to the debug version, ie:

to

However, when using webpack and then importing via npm:

import openlayers from 'openlayers'

Gets you the production distribution of the library, the same as the ol.js script from above.

On a side note, to stop webpack trying to parse a prebuilt library and throw a warning about that you must include something like this:

// Squash OL whinging
webpackConfig.module.noParse = [
  /\/dist\/ol.*\.js/,  // openlayers is pre-built
]

Back to the problem at hand: how can I conditionally load a different entry-point for a module prebuilt and imported like this?

Of course, I can do it in a hacky way. By going into the node_modules/openlayers/package.json and switching the browser field from

  "browser": "dist/ol.js",

to

 "browser": "dist/ol-debug.js",

Is there a way I can request a different entry point via webpack or by using a different import syntax? Do I first have to petition the library maintainers to update the browser field to allow different entry point hints to browsers, according to the spec? https://github.com/defunctzombie/package-browser-field-spec

Thoughts on a more effective way to make this happen? Yearning to be able to programmatically switch loading of the production and debug versions of a library based on env variables.

Cussed

Answer 1

Webpack has configuration options for replacing a module into a different path: https://webpack.github.io/docs/configuration.html#resolve-alias

This resolves the openlayers import to use the debug version:

webpackConfig.resolve.alias: {
  openlayers: 'openlayers/dist/ol-debug.js'
}

In my build system I have a function that takes the environment type and returns the matching webpackConfig. Based on the parameter I include the above snippet or not. Full code: webpack-multi-config.js

I have two different (gulp-) tasks for development and production. For example the production task: webpackProduction.js
Line 1 imports the config script with production as type.

My build system is based on gulp starter.

Transported

Or openlayers$: 'openlayers/dist/ol-debug.js to not break requiring ol.css – Sosanna