webpack gl-matrix as an external

Question

I'm writing a library using gl-matrix as a dependency. I'm using webpack to output the src and want to exclude gl-matrix part from my code but list it as a dependency.

But turns out I can only packed the gl-matrix into the lib, or have error saying objects from gl-matrix like vec3 is undefined in my lib. Any ideas?

webpack.config.js

module.exports = {
  //...
  output: {
    filename: 'minimal-gltf-loader.js',
    path: path.resolve(__dirname, 'build'),
    library: 'MinimalGLTFLoader',
    libraryTarget: 'umd'
  },
  externals: {
    glMatrix: {
      commonjs: 'gl-matrix',
      commonjs2: 'gl-matrix',
      amd: 'gl-matrix'
    }
  }
}

minimal-gltf-loader.js (my lib)

import {vec3, vec4, quat, mat4} from 'gl-matrix';
//...
export { MinimalGLTFLoader };

the app

import {vec3, vec4, quat, mat4} from 'gl-matrix';
var mgl = require('../build/minimal-gltf-loader.js');

Answer 1

  externals: [
    {
      'gl-matrix': {
        root: 'window',
        commonjs: 'gl-matrix',
        commonjs2: 'gl-matrix',
        amd: 'gl-matrix'
      }
    }
  ]

If you import gl-matrix via script tag, it will be several global variables like vec3,mat4, but not gl-matrix.vec3,gl-matrix.mat4. So you can set them to one variable and then use this variable as webpack external root config.

Then I found that window object has window attr that points to it self, so use 'window' in root field is a better choice and it's doesn't need to declare a united variable anymore.

Answer 2

externals: {
    'gl-matrix': {
      commonjs: 'gl-matrix',
      commonjs2: 'gl-matrix',
      amd: 'gl-matrix'
    }
}

external dict name should match name of the lib