如何在Webpack开发服务器中提供静态资产，例如JSON文件？

Question

我正在构建一个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 服务器，我希望可以使用类似以下方式来提供 JSON 文件 - axios.get('http://localhost:3000/user.json')。

- Anunaya Srivastava

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 router干扰查找。

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

- Daniel

Answer 2

您可以使用webpack的file-loader将文件作为静态文件进行服务，例如图片。 您可以在“main”（入口点）文件中尝试以下内容：

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

这个要求只是告诉webpack将该文件“发射”到输出目标中，否则它对其一无所知。

您还需要安装file-loader：

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

- fabio.sussetto

---

我们如何提供静态PDF文件？ - xeiton