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

Question

有一个 javascript 库，在 npm 上预构建和可用，我希望使用/调试来开发。就我而言，它是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

想出一种更有效的方法来实现这一点？渴望能够基于环境变量以编程方式切换库的生产和调试版本的加载。

Answer 1

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

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

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

在我的构建系统中，我有一个函数，它接受环境类型并返回匹配的 webpackConfig。根据参数，我是否包含上述 sn-p。 完整代码：webpack-multi-config.js

我有两个不同的（gulp-）开发和生产任务。例如生产任务：webpackProduction.js
Line 1 导入配置脚本，类型为production。

我的构建系统基于gulp starter。