webpack - 开发时使用未缩小的库版本答案

【问题标题】：webpack - use unminified library version when devwebpack - 开发时使用未缩小的库版本
【发布时间】：2020-03-13 16:49:28
【问题描述】：

我有一个使用分叉的 apexcharts npm 包的 TypeScript 项目。在使用 webpack develpement 模式构建项目时，我想使用未缩小版本的 apex 图表库，对于生产，我想继续使用缩小版本。 Apexcharts 包提供库的缩小版和未缩小版。

可以这样配置 webpack 吗？应该执行哪些配置步骤？

【问题讨论】：

标签： typescript npm webpack

【解决方案1】：

首先：当您使用 Webpack 打包库时，我认为使用缩小版库没有任何价值。 Webpack/Terser Plugin 会为你缩小它。

我相信你可以通过使用Resolve aliases来实现你的目标

片段（未经测试）

const alias = {};

if(isDev) { // NODE_ENV === 'development' or mode etc.
  alias['apexwhatever'] = path.resolve('path/to/unminified.js');
} else {
  alias['apexwhatever'] = path.resolve('path/to/minified.js');
}

module.exports = {
  resolve: {
    alias
  }
};

【讨论】：

感谢您的建议。我已经让它有点不同了。事实上，我使用的是 fork o 顶点图表，因此我扩展了构建配置以在开发模式下构建 apexcharts.esm.js。 Webpack 似乎使用 apecharts 包中的这个文件来构建我的项目。最后，开发模式的顶点没有被缩小，而对于产品来说，它是 - 这就是目标。