如何在webpack dev服务器中提供json文件等静态资源？

Question

我正在建立一个反应应用程序.我用yeoman来生成react app结构.我使用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"
    ]
  }
}

我正在使用axioshttp请求.目前,我没有编写服务器来返回json数据.因此,为了测试应用程序的功能,我想从json文件提供静态json数据.

我怎样才能做到这一点？

由于此设置正在运行Web服务器,我希望可以使用类似的东西来提供json文件axios.get('http://localhost:3000/user.json').

Answer 1

如果您从此处找到的 Facebook 的“create-react-app”说明启动您的应用程序：https : //facebook.github.io/react/docs/installation.html

然后我找到了一种简单的方法，可以从 URL 访问 JSON 文件，而无需 React Router 拦截请求。

您所要做的就是在“create-react-app”脚手架的 index.js 中，添加如下内容作为第一行： import './myJsonFile.json';

就是这样，之后去： http://localhost:3000/myJsonFile.json 将正确获取文件，而 React 路由器不会干扰查找。

（也许这不完全是您的问题，因为您使用了不同的方式来生成应用程序，但对于那些使用“create-react-app”作为基础的人来说，这将是一个答案）。

Answer 2

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

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

这个 require 只是告诉 webpack 在输出目标中“发出”该文件，否则它不知道任何信息。

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

npm install --save-dev file-loader

然后使用 webpack-dev-server 您应该能够从http://localhost:8080/api/user.json访问该文件 （根据您的 webpack 开发服务器配置替换 localhost:8080）。

但是，如果您需要存根 json api，我宁愿使用类似以下的东西：

• https://www.npmjs.com/package/json-server
• https://www.npmjs.com/package/dyson

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

如果你想要更简单的东西，你可以使用这个： https: //www.npmjs.com/package/superstatic来简单地提供静态文件，或者更简单，看看这些单行代码如何启动一个简单的 http 服务器来为你的服务提供服务。静态 json 文件：

https://gist.github.com/willurd/5720255