webpackgl-matrix

webpack gl-matrix as an external


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');

Solution

  •   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.