How to bundle d3 v4 using webpack

Question

I used D3 v3 with webpack, which was simple with one package. Now that D3 v4 has become modular with separate packages, I cannot bundle them into a single package.

I referenced the mbostock article below using the cumulative file, but it does not say that it cannot load d3 from index.js. Can someone help me with how to link them using webpack?

EDIT 1: I removed d3 from the collapse options and the drive was working fine. I explained the steps below

• Installed D3 v4.
• Added drive configuration and save to. / dist / d 3.min.js
• bound web package to. / dist / d 3.min.js
• tried resolve.alias in webpack and demanded ("d3") in one home.js. But no luck what he says.

can't resolve d3 module in home.js

5. tried webpack.Provideplugin in home.js. Still error above.

Can someone help me with downloading this d3?

Rollup.js

import node from "rollup-plugin-node-resolve"; export default { entry: "index.js", format: "umd", moduleName: "d3", plugins: [node()], dest: "./dist/d3.js" }; 

index.js

 export * from "d3-selection"; export * from "d3-zoom"; export * from "d3-scale"; export * from "d3-drag"; export * from "d3-force"; export * from "d3-axis"; 

webpack.config.js

 var webpack = require('webpack') var path = require('path') module.exports = { entry: [ //"./dist/d3-combined.js", "./client/home.js" ,"./client/pages.js" ,"./client/graph.js" ,"./client/orient_databases.js" ,"./node_modules/d3/d3.js", ,"./public/jquery-2.2.4.min.js" ] ,output: { path: path.join(__dirname,'dist') // ,path: '/static' ,publicPath: 'http://localhost:3000/scripts/' ,filename: 'bundle.js' } ,plugins :[ new webpack.ProvidePlugin({ jquery : "jquery" }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] ,module: { // avoid webpack trying to shim process noParse: /es6-promise\.js$/, loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, // excluding some local linked packages. // for normal use cases only node_modules is needed. exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//, loader: 'babel-loader', query : { presets : ['es2015'] //,optional : ["runtime"] } } ] } ,resolve : { //root : [path.resolve('./node_modules')], alias : [ {"d3": path.join(__dirname,"dist/d3.min.js") } ], modulesDirectories : ["node_modules"] } } 

Answer 1

There is a lot of incompatibility with the D3 v4 rollup approach, and webpack yours is a perfectly reasonable approach.

Does it seem like you are missing a thumbnail step? (Rollup.js creates d3.js , but webpack.config.js expects d3.min.js )

It is also possible that the new webpack v2 configuration has some relevant fixes.

This setup works for me (using webpack v2):

home.js

let d3 = require('d3');

rollup.config.js

 import npm from 'rollup-plugin-node-resolve'; export default { entry: './d3.bundle.js', format: 'umd', moduleName: 'd3', plugins: [npm({jsnext: true})], dest: './dist/d3.js' }; 

d3.bundle.js

 export * from "d3-selection"; export * from "d3-zoom"; export * from "d3-scale"; export * from "d3-drag"; export * from "d3-force"; export * from "d3-axis"; 

package.json

 { ... "scripts": { "prepublish": "rollup -c && uglifyjs dist/d3.js -c -m -o dist/d3.min.js" }, ... } 

webpack.config.js

 module.exports = { ... resolve: { alias: { 'd3': path.resolve(__dirname, 'dist/d3.min.js') } }, ... };