Webpack：關於生產和開發環境之間的入門差異

Question

我正在閱讀有關Webpack的教程：Github Webpack tutorial在這裏，有一個關於生產和開發配置webpack的章節。

這裏是開發配置：

// webpack.config.dev.js 
module.exports = { 
    devtool: 'cheap-eval-source-map', 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/dev-server', 
    './src/index' 
    ], 

這裏是生產型：

// webpack.config.prod.js 
module.exports = { 
    devtool: 'source-map', 
    entry: ['./src/index'], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 

我理解的devtool選項的差異。我對entry不瞭解。爲什麼在生產，entry僅約src/index但在開發配置，條目還包括webpack-dev-server

'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/dev-server', 
    './src/index' 

Answer 1

這裏是兩件事情你瞭解之前應該知道：

1. 當你的鏈接在Webpack the confusing part，有3種類型的條目：字符串陣列和對象。如上面的代碼，這是數組類型。入口數組的含義是：Webpack將所有這些javascript文件合併在一起。這通常是不必要的，因爲Webpack足夠智能，可以在處理時知道哪些JavaScript文件需要合併。您經常需要這樣做來增強來自不同JavaScript文件的某些功能，這些功能不包含在代碼中的其他位置。
2. 這是「小小棘手」的部分。你看到webpack/hot/dev-server和webpack-dev-server/client?http://localhost:8080看起來像一個網址而不是一些javascript文件，對吧？如果您檢查項目目錄，則會看到有這些文件：your_app_directory/node_modules/webpack/hot/dev-server.js和your_app_directory/node_modules/webpack-dev-server/client.js。這就是真正的含義：您正在從兩個模塊webpack-dev-server和webpack導入兩個JavaScript文件。

再次回到你的WebPack配置：

entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/dev-server', 
    './src/index' 
    ], 

這意味着我們將合併三個不同的JavaScript文件一起作爲第2點我已經想通了。正如我在第1點中所解釋的那樣，您將這樣做來增強某些功能。您包含文件webpack-dev-server/client.js，用於爲服務器提供代碼。您包含文件webpack/hot/dev-server.js以允許您的代碼自動加載。當您每次修改代碼時處於沒有啓動/停止服務器的開發模式時，這是非常有用的。

Answer 2

'webpack-dev-server/client?http://localhost:8080'和'webpack/hot/dev-server'正在配置的線條/限定附加哪個端口活性的WebSocket到，在這種情況下localhost:8080，並且content base在這種情況下是文件夾/路徑/client。在生產環境中，您永遠不會運行webpack-dev-server，因爲您的捆綁客戶端資產（bundle.js或類似文件）將由服務器（IIS，Node等）提供服務，這就是爲什麼生產配置的entry中沒有與webpack相關的項目。問題webpack-dev-server

的的WebPack插件不運行的WebPack和編譯JS源所需，簡單地說就是，可以在開發過程中被用來監視更改並重新加載更改的工具。

從技術上講，開發中的entry數組屬性可能只是'./src/index'，但它不會啓用webpack-dev-server和/或它的熱模塊重新加載。如果你想在沒有這些配置項的情況下運行webpack-dev-server，那麼你需要在啓動webpack時添加命令行參數來指定端口和/或內容庫。

希望有幫助！