D3 Webpack Loader
Automatically bundle D3 v4 modules under a single
d3 import with D3 Webpack Loader.
If you are using a subset of the modules provided by the default D3 build or are supplementing the default D3 build with additional modules, consider using D3 Webpack Loader to combine them under a single namespace. This lets you continue using D3 in your code in the familiar
How do I use it?
npm installing a number of d3 modules, you can access them via
d3.___ in your code by importing
d3 with the loader. For instance, if we have installed d3-array, we can do:
;d3; // === 10
Important! Don't forget to include the
! at the end of the import. That tells webpack to use the
d3-webpack-loader. If you prefer to be more verbose about it, you can also write the import as:
D3 Webpack Loader automatically figures out which D3 modules you have installed by scanning your module directories (e.g.,
node_modules) for packages that begin with
d3- and combines them into a single object so you can access them under a single
If you'd like to exclude certain packages that begin with
d3-, you can specify that in your webpack config under
// webpack.config.jsmoduleexports =...d3Loader:exclude: 'd3-dont-load-me' 'd3-i-mean-it';
How does it work?
It essentially does the equivalent of creating a local file that lists all your installed d3 modules and exports them as a single object. For instance, an equivalent manual set up would be if you had a local
And you used this in your code like:
;d3 // === 10
Doing it manually means you need to update your
d3-combined.js file every time you install a new D3 module. Instead, you can just use D3 Webpack Loader and
import d3 from 'd3!' and have it work automatically.
Code is written in old school ES5. No fancy new JS features. I don't know why I did this and I regret it. At least it is pretty brief.
To run tests, you first need to install the test fixtures. Do this by running
npm run test:install. Then you can run tests:
npm run test
To lint files, run:
npm run lint