Carlos Aguni

Highly motivated self-taught IT analyst. Always learning and ready to explore new skills. An eternal apprentice.


Webpack 4 d3js

23 Sep 2022 »

https://pointclearmedia.com/2019/06/26/simple-webpack-d3-setup/

mkdir webpack-d3
cd webpack-d3

npm i --save-dev @babel/core webpack webpack-cli webpack-dev-server http-server babel-loaderpm init -y

npm i d3

add to package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack",
    "serve": "webpack-dev-server --mode development --open --hot"
  },

webpack.config.js

const path = require('path');

module.exports = {
  //...
  devServer: {
    static: {
      directory: path.join(__dirname),
    },
    compress: true,
    port: 9000,
  },
};

src/index.js

import * as d3 from 'd3';

const square = d3.selectAll("rect");
square.style("fill", "orange");

build project

npm run webpack

start

npm run serve