使用webpack时无法在d3.js中加载json

Question

我按照本教程使用D3和Webpack How to Set Up D3.js with Webpack

但是当我试图用这段代码加载我的json时：

#include <iostream>
#include <string>

using namespace std;

void scrambleString(string str)
{
    int x = str.length();
    for (int y = x; y > 0; y--)
    {
        int pos = rand() % x;
        char tmp = str[y - 1];
        str[y - 1] = str[pos];
        str[pos] = tmp;
    }
    cout << str;
}

int main()
{
    // Arrays for RNG to work with //
    char letters[] = { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
        'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
        's', 't', 'u', 'v', 'w', 'x', 'y', 'z' };

    char symbols[] = { '!', '£', '$', '%', '&', '*', '@', '~' };

    char numbers[] = { '1', '2', '3', '4', '5', '6', '7', '8', '9' };

    // Other Variables //
    int letterIn;
    int specialIn;
    int numberIn;
    string randomPass;
    string holdString;

    cout << "No of Letters:  ";
    cin >> letterIn;
    cout << "No of Special char:  ";
    cin >> specialIn;
    cout << "No of Numbers:  ";
    cin >> numberIn;

    // Letters
    for (int i = 0; i < letterIn; i++)
    {
        int RNG = rand() % 26;
        char holdChar = letters[RNG];
        // Convert to String
        holdString.insert(i, 1, holdChar);

    }
    // Symbols
    for (int i = 0; i < specialIn; i++)
    {
        int RNG = rand() % 8;
        char holdChar = symbols[RNG];
        // Convert to String
        holdString.insert(letterIn, 1, holdChar);
    }
    // Numbers
    for (int i = 0; i < numberIn; i++)
    {
        int RNG = rand() % 8;
        char holdChar = symbols[RNG];
        // Convert to String
        holdString.insert(letterIn+specialIn, 1, holdChar);
    }
    cout << holdString << endl;
    scrambleString(holdString);
}

我在使用webpack web dev服务器后收到此错误消息：

import * as d3 from 'd3'

d3.json("data.json", function(error, data) {
  console.log(data)
})

这是我的webpack配置

Failed to load resource: the server responded with a status of 404 (Not Found) :8080/data.json

我的package.json

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
})
module.exports = { 
  entry: './src/index.js', 
  output: { 
    path: path.resolve('dist'), 
    filename: 'index_bundle.js'
  }, 
  module: { 
    loaders: [ 
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  }, 
  plugins: [HtmlWebpackPluginConfig]
}

目录结构

{
  "name": "tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "babel src -d lib",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-env": "^1.3.3"
  }
}

我做错了什么？