使用webpack时在d3.js中加载json失败

为了在Webpack中使用D3，我遵循了本教程

但当我试图用以下代码加载json时：

import * as d3 from 'd3'

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

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

Failed to load resource: the server responded with a status of 404 (Not Found) :8080/data.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]
}

还有我的package.json

{
  "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"
  }
}

目录结构

Tutorial
  node_modules
  src
    data.json
    index.html
    index.js
  .babelrc
  package.json
  webpack.config.js

---

我做错了什么？

您没有将事件d3作为您的依赖项，我猜这是因为在教程中，安装d3.js时不需要使用

--save

。但是我可以毫无问题地复制教程。发布你的目录结构我添加了我的目录结构你需要告诉webpack复制

数据。json

到

dist

到你没有

d3

作为你的依赖项我猜这是因为在教程中安装时不需要使用

--save

D3.js。但是我可以毫无问题地复制教程。发布你的目录结构我添加了我的目录结构你需要告诉webpack将

data.json

复制到

dist