title: How to bundle d3 v4 using webpack
body: <p>I was using D3 v3 with webpack which was simple with one single package. Now that <strong>D3 v4</strong> has become modular with separate packages, I am unable to bundle them into single package.</p>
  
  <p>I have referred to mbostock's <a href="http://bl.ocks.org/mbostock/bb09af4c39c79cffcde4" rel="noreferrer">article</a> below using rollup but it fails saying it is unable to load d3 from index.js. Can anyone help me with how to bundle them using webpack? </p>
  
  <p><strong>EDIT 1:</strong>
  I removed d3 from the rollup options and the rollup worked fine. I have explained the steps below</p>
  
  <ol>
  <li>D3 v4 installed.</li>
  <li>Added rollup config and storing to ./dist/d3.min.js</li>
  <li>pointed webpack to the ./dist/d3.min.js</li>
  <li>tried <strong>resolve.alias</strong> in webpack and require("d3") in one home.js. But no luck it says </li>
  </ol>
  
  <blockquote>
    <p>cannot resolve module d3 in home.js</p>
  </blockquote>
  
  <ol start="5">
  <li>tried <strong>webpack.Provideplugin</strong> in home.js. Still the above error.</li>
  </ol>
  
  <p>Can anyone please help me with getting this d3 loaded? </p>
  
  <p><strong>Rollup.js</strong></p>
  
  <pre><code>import node from "rollup-plugin-node-resolve";
  
  export default {
    entry: "index.js",
    format: "umd",
    moduleName: "d3",
    plugins: [node()],
    dest: "./dist/d3.js"
  };
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>export * from "d3-selection";
  export * from "d3-zoom";
  export * from "d3-scale";
  export * from "d3-drag";
  export * from "d3-force";
  export * from "d3-axis";
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>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"]
           }
  
  }
  </code></pre>