如何在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"
    ]
  }
}

我正在使用axios来发出http请求。 目前，我没有编写服务器来返回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路由器妨碍并拦截请求。

您所要做的就是在'create-react-app'脚手架的index.js中，添加类似于第一行的内容：import'./myJsonFile.json';

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

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

Answer 2

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

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

这需要告诉webpack在输出目的地“发出”该文件，否则它不知道任何相关信息。

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

npm install --save-dev file-loader

然后使用webpack-dev-server，您应该能够从http：// localhost：8080 / api / user.json访问该文件（根据您的webpack dev服务器配置替换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