Webpack / NPM：使用已安装模块的构建版本而不是从源代码重新构建

【问题标题】：Webpack / NPM: Use build version of installed module instead of re-building from sourceWebpack / NPM：使用已安装模块的构建版本而不是从源代码重新构建
【发布时间】：2017-04-20 15:42:51
【问题描述】：

我想将 dat.GUI 库用于使用 Webpack 2 构建的项目。如果我通过 npm -install --save-dev dat.gui 安装模块，然后尝试使用 import * as DAT from 'dat.gui'; 导入它，当 Webpack 尝试时会出现以下错误编译我的项目：

ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in 
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix 
when using loaders.

我知道在使用 Webpack 2 构建基于 Webpack 1 的项目时会发生此错误。但是，如果node_modules/dat.gui/build'; 中已经有构建版本，为什么 Webpack 还要尝试构建模块？有没有办法告诉 Webpack 或 NPM 使用现有的构建版本而不尝试重新构建它？

【问题讨论】：

标签： javascript node.js npm webpack dat.gui

【解决方案1】：

在导入节点模块时，webpack 会查看其package.json 并使用main field 作为模块的入口，类似于 Node.js 所做的（webpack 默认会查找更多字段，请参阅resolve.mainFields）。

由于dat.gui 的主要字段不指向构建版本，而是指向源，它实际上内联加载器，如dat.gui@0.6.1 - NumberControllerSlider.js 中看到的styleSheet 导入，这通常不是一个好主意，并且肯定不会发布。

但是你可以通过指定相应的路径来导入构建的版本。所以你的导入将是：

import * as DAT from 'dat.gui/build/dat.gui.js';

如果您仍想只导入 dat.gui，您可以将 resolve.alias 配置为指向构建版本，如下所示：

resolve: {
  alias: {
    'dat.gui': 'dat.gui/build/dat.gui.js'
  }
}

这样你就可以使用你原来的导入语句了：

import * as DAT from 'dat.gui';

【讨论】：