Reactjs 如何在webpack开发服务器中提供json文件等静态资产？

我正在构建一个react应用程序。我使用yeoman生成react应用程序结构。我正在使用webpack捆绑所有js文件。我的

package.json

是-

{
  "dependencies": {
    "axios": "^0.15.0",
    "classnames": "^2.2.5",
    "es6-shim": "^0.35.0",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-mdl": "^1.7.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.0",
    "redux": "^3.5.1",
    "todomvc-app-css": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^6.2.2",
    "babel-core": "^6.13.0",
    "babel-eslint": "^6.0.2",
    "babel-loader": "^6.2.0",
    "babel-plugin-istanbul": "^2.0.1",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.2.0",
    "babel-preset-react": "^6.1.18",
    "browser-sync": "^2.9.11",
    "browser-sync-spa": "^1.0.3",
    "css-loader": "^0.23.1",
    "del": "^2.0.2",
    "es6-shim": "^0.35.0",
    "eslint": "^3.2.2",
    "eslint-config-xo-react": "^0.7.0",
    "eslint-config-xo-space": "^0.12.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-babel": "^3.1.0",
    "eslint-plugin-react": "^5.0.1",
    "extract-text-webpack-plugin": "^2.0.0-beta.3",
    "file-loader": "^0.9.0",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-filter": "^4.0.0",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-sass": "^2.1.1",
    "gulp-util": "^3.0.7",
    "html-webpack-plugin": "^2.9.0",
    "jasmine": "^2.4.1",
    "json-loader": "^0.5.4",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-junit-reporter": "^1.1.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-phantomjs-shim": "^1.1.2",
    "karma-webpack": "^1.7.0",
    "node-sass": "^3.4.2",
    "phantomjs-prebuilt": "^2.1.6",
    "postcss-loader": "^0.8.0",
    "react-addons-test-utils": "^15.0.1",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "webpack": "2.1.0-beta.20",
    "webpack-dev-middleware": "^1.4.0",
    "webpack-hot-middleware": "^2.6.0"
  },
  "scripts": {
    "build": "gulp",
    "serve": "gulp serve",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "extends": [
      "xo-react/space",
      "xo-space/esnext"
    ]
  }
}

我正在使用

axios

发出http请求。目前，我还没有编写服务器来返回json数据。因此，为了测试应用程序的功能，我想从json文件中提供静态json数据

我怎样才能做到这一点

---

由于此安装程序运行的是web服务器，因此我希望可以使用类似-

axios.get（）的东西来提供json文件http://localhost:3000/user.json“）

您可以使用webpack文件加载器让webpack为该文件提供服务，就像它是任何其他静态文件（例如图像）一样。 您可以在“主”（入口点）文件中尝试此操作：

只需要告诉webpack在输出目标中“发出”该文件，否则它就什么都不知道

您还需要安装文件加载器：

npm安装--保存dev文件加载器

然后使用webpack dev server，您应该能够从访问该文件（根据您的webpack dev server配置替换localhost:8080）

但是，如果您需要存根json api，我宁愿使用以下内容：

更灵活，可以处理更高级的事情，如使用正确的内容类型提供响应、测试跨域问题、JSONP等

如果您想要更简单的东西，可以使用以下方法：只需为静态文件提供服务， 或者更简单一些，看看这些一行程序如何启动一个简单的http服务器来为您的静态json文件提供服务：

---

如果您是从Facebook的“创建反应应用程序”说明启动应用程序，请参见：

然后，我找到了一种简单的方法，可以从URL访问JSON文件，而无需React路由器来阻止并拦截请求

你所要做的就是在“create react app”框架的index.js中，添加如下内容作为第一行： 导入“/myJsonFile.json”

就这样，之后我们将： 将正确获取文件，而不会干扰查找

---

（可能这不完全是你的问题，因为你使用了不同的方式生成应用程序，但这将是那些使用“创建反应应用程序”作为基础的人的答案）。

我们如何提供静态pdf文件？

require("file-loader?name=api/[name].[ext]!./user.json");