通过npm/webpack加载预构建模块的调试版本

Question

有一个jpm库,预先构建并在npm上可用,我希望用/ debug开发.在我的情况下,它是openlayers.

在需要javascript文件并想要调试的经典方法中,只需将脚本URL从生产版本切换到调试版本,即:

至

但是,当使用webpack然后通过npm导入时:

import openlayers from 'openlayers'

获取库的生产分布,与上面的ol.js脚本相同.

另外,要阻止webpack尝试解析预构建的库并发出警告,必须包含以下内容:

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

回到手头的问题:如何有条件地为预建和导入的模块加载不同的入口点？

当然,我可以用hacky的方式做到这一点.进入node_modules/openlayers/package.json并从中切换浏览器字段

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

至

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

有没有办法可以通过webpack或使用不同的导入语法请求不同的入口点？根据规范,我是否首先要请求图书馆维护者更新浏览器字段以允许不同的入口点提示到浏览器？https://github.com/defunctzombie/package-browser-field-spec

关于更有效地实现这一目标的想法？希望能够以编程方式基于env变量切换库的生产和调试版本的加载.

Answer 1

Webpack具有将模块替换为不同路径的配置选项:https://webpack.github.io/docs/configuration.html#resolve-alias

这解决了openlayers导入以使用调试版本:

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

在我的构建系统中,我有一个函数,它接受环境类型并返回匹配的webpackConfig.基于参数我是否包括上述片段.完整代码:webpack-multi-config.js

我有两个不同的(gulp-)任务用于开发和生产.例如,生产任务:webpackProduction.js
第1行使用production类型导入配置脚本.

我的构建系统基于gulp启动器.