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

Question

I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is trying to compile my project:

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.

I know this error occurs when using Webpack 2 to build Webpack 1 based projects. But why is Webpack even trying to build the module if there already is a build version inside node_modules/dat.gui/build'; ? Is there a way to tell Webpack or NPM to use the existing build version without trying to re-build it?

Answer 1

When importing a node module, webpack looks into its package.json and uses the main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields ).

Since for dat.gui the main field does not point to the built version but to the source, which actually inlines loaders as seen in dat.gui@0.6.1 - NumberControllerSlider.js for the styleSheet import, and that is not a good idea in general and certainly not to publish.

But you can import the built version by specifying the corresponding path. So your import would be:

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

If you'd like to still import just dat.gui you can configure resolve.alias to point to the built version as follows:

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

With that you can use your original import statement:

import * as DAT from 'dat.gui';