如何在webpack dev服務器中提供json文件等靜態資產？

我正在構建一個反應應用程序。我用yeoman生成反應應用程序結構。我正在使用webpack捆綁所有js文件。我package.json是 -如何在webpack dev服務器中提供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數據。

我該如何做到這一點？

由於此安裝程序運行的是網絡服務器，我希望可以使用類似於 - axios.get('http://localhost:3000/user.json')的文件來提供json文件。

來源

2016-10-11 Anunaya Srivastava

您可以使用webpack文件加載器讓webpack提供該文件，就好像它是任何其他靜態文件一樣，例如，一個圖像。你可以用這個嘗試在你的「主」（入口點）文件：

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

這需要是隻需要告訴的WebPack爲「發出」輸出目的地文件，否則它不知道任何有關它。

你還需要安裝文件裝載器：用的WebPack-DEV-服務器

npm install --save-dev file-loader

那麼你應該能夠從http://localhost:8080/api/user.json訪問該文件（替換本地主機：根據8080您的WebPack開發服務器配置）。

但是，如果你需要存根JSON API，我寧願使用的類似：即更加靈活，並能處理更高級的

像正確的內容類型提供響應，測試跨域問題，JSONP等。

如果你想要某些東西荷蘭國際集團更簡單，您可以使用此：https://www.npmjs.com/package/superstatic簡單地提供靜態文件，或者更簡單，看看如何將這些單行開始一個簡單的HTTP服務器，以滿足您的靜態JSON文件：

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

來源

2016-10-11 16:04:46

如果您從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 可以正確讀取，而不作出反應的路由器的干擾查找文件。

（也許這不完全是你的問題，因爲你已經使用了不同的方式來生成應用程序，但這將是那些使用'create-react-app'作爲基礎的人的答案）。

來源

2017-01-17 23:24:08 Daniel

如何在webpack dev服務器中提供json文件等靜態資產？

回答

相關問題