爲什麼React需要webpack-dev-server運行？

我是新來的React，我跟着Facebook's Installation（創建一個新的應用程序）。爲什麼React需要webpack-dev-server運行？

所以每次我需要運行的應用程序時，它需要啓動服務器。當我嘗試在chrome中打開構建版本（直接打開HTML）時，什麼都不顯示。

然後我試圖安裝使用教程codecademy從頭開始作出反應的環境自己。在這裏，在我構建項目之後，我可以直接在Chrome中打開HTML並顯示內容。

我的問題是：

爲什麼網頁不會被顯示在第一個方法，但第2個方法，而無需啓動服務器運行？

編輯：

的package.json對於第二方法：

{ 
    "name": "practice", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack", 
    "start": "webpack-dev-server" 
    }, 
    "author": "", 
    "license": "ISC", 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-react": "^6.24.1", 
    "html-webpack-plugin": "^2.30.1", 
    "webpack": "^3.6.0", 
    "webpack-dev-server": "^2.8.2" 
    } 
}

webpack.config.js：

var HTMLWebpackPlugin = require('html-webpack-plugin'); 
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({ 
    template: __dirname + '/app/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}); 

module.exports = { 
    entry: __dirname + '/app/index.js', 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     } 
    ] 
    }, 
    output: { 
    filename: 'transformed.js', 
    path: __dirname + '/build' 
    }, 
    plugins: [HTMLWebpackPluginConfig] 
};

來源

2017-09-21 unknownymouse

簡單的答案..確定你爲什麼在你的codeacademy中運行'npm run build'和它做了什麼。你應該能夠弄清楚這一點。如果讀完後仍然有問題，請回復 – Panther

@Panther在我的package.json中，構建腳本是'webpack'，啓動腳本是'webpack-dev-server'。所以，在我的第二種方法中，我只是調用'webpack'來調用加載器。我沒有調用'start'啓動服務器。我用package.json編輯了我的問題。 – unknownymouse

我的意思是'webpack'實際上是運行（使用babel），uglify並建立你的'build/dist'文件夾。因此，從它們打開索引文件將顯示所有必需的js/css存在的內容。在使用'dev-server'時，不會生成acutal文件。所需的js/css大多是來自文件系統的服務器。 – Panther

問題是：指向HTML中其他文件的路徑。

當webpack-dev-server從目錄中運行時，它假定它是服務器的根。

因此，如果您打開使用Facebook教程創建的應用程序的HTML（build/index.html），則可以看到其他文件的路徑是作爲絕對路徑給出的，而不是作爲相對路徑給出的。

像HTML，你可以看到/static/pathToFile但不./static/pathToFile。

因此，根據你的第二個方法，儘量給路徑transformed.js在你的HTML /transformed.js。它不顯示任何東西。但是如果你運行npm run start然後用給定的端口號打開你的本地主機（就像第一種方法一樣）。現在你可以看到你的React應用程序。

意見：始終由自己從頭開始嘗試建立您的環境。不要試圖輕鬆設置Facebook的「創建新應用程序」等方法。請嘗試Facebook的「添加對現有應用程序的反應」。你可以學習如何實際工作，就像今天一樣。

提示：

嘗試總是調試應用程序在網絡瀏覽器！

例如，在你並公開Chrome的開發者工具打開你的第一個方法的HTML。

頭以上的網絡選項卡，並重新加載。

將鼠標懸停在失敗的文件上以查看錯誤是什麼。你可以看到ERR_FILE_NOT_FOUND。

一下就可以看到返回狀態，URL請求等

希望它能幫助！

來源

2017-09-21 11:12:47 SkrewEverything

感謝您的解釋和提示！ – unknownymouse

爲什麼React需要webpack-dev-server運行？

回答

相關問題