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

Question

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

In the classic way, require a javascript file and you need to debug it, you can just switch the script URL from the production version to the debug version, that is:

to

However, when using webpack and then importing through npm:

import openlayers from 'openlayers' 

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

On the side of the note, to stop the web package, trying to parse the pre-created library and give a warning that you should include something like this:

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

Let's return to the problem: how can I conditionally load a different starting point for a previously created and imported module?

Of course, I can do it in a hacker way. By going to node_modules / openlayers / package.json and switching the browser field with

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

to

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

Is there a way I can request another entry point via webpack or using different import syntax? Do I have to first request that the supporting libraries update the browser field so that the browsers offer different hints for entry points, according to the specification? https://github.com/defunctzombie/package-browser-field-spec

Thoughts on a more effective way to achieve this? Longing to be able to programmatically switch the loading of release versions and debugging libraries based on env variables.

Answer 1

Webpack has configuration options for replacing the module with another path: https://webpack.imtqy.com/docs/configuration.html#resolve-alias

This allows the import of openlayers 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 type of environment and returns the corresponding webpackConfig. Based on parameter I, include the above snippet or not. Full code: webpack-multi-config.js

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

My build system is based on gulp starter .