如何設定基本的 webpack，反應和 babel 環境

這個構建管道並不完全是你所謂的生產就緒，但它確實為你提供了一個可靠的開始，你可以新增你需要的東西，以獲得你正在尋找的開發體驗。有些人採取的方法（有時包括我自己）是採用 Yeoman.io 或其他地方的完全構建的管道，然後剝去他們不想要的東西，直到它適合那種風格。這沒有什麼不妥，但也許通過上面的例子，你可以選擇相反的方法並從裸骨中建立起來。

你可能想要新增的一些內容包括測試框架和覆蓋統計資訊，如 Karma with Mocha 或 Jasmine。與 ESLint 合作。在 webpack-dev-server 中更換熱模組，以便獲得 Ctrl + S，F5 開發體驗。此外，當前管道僅在開發模式下構建，因此生產構建任務將很好。

注意！

請注意，在 webpack.config.js 的 context 屬性中，我們使用節點路徑模組來定義路徑，而不是僅將 __dirname 連線到字串/src，這是因為 windows 討厭正斜槓 。因此，要使解決方案更具跨平臺相容性，請使用槓桿節點來幫助我們。

webpack.config.js 屬性的說明

上下文

這是 webpack 將用作解析相對檔案路徑的根路徑的檔案路徑。所以在 index.jsx 中我們使用 require('./index.html')，dot 實際上解析為 src/目錄，因為我們已經在這個屬性中定義了它。

條目

webpack 首先開始繫結解決方案。這就是為什麼你會在 index.jsx 中看到我們將需求和匯入的解決方案拼接在一起的原因。

輸出

這是我們定義 webpack 應該刪除它發現繫結的檔案的位置。我們還為檔案定義了一個名稱，我們將在其中刪除繫結的 javascript 和樣式。

devServer

這些是特定於 webpack-dev-server 的設定。contentBase 定義了伺服器應該將其作為根的位置，我們在這裡定義了 dist/資料夾作為我們的基礎。port 是伺服器將託管在其上的埠。open 用於指示 webpack-dev-server 在你啟動伺服器後為你開啟預設瀏覽器。

模組>裝載機

這定義了 webpack 使用的對映，以便在找到不同的檔案時知道該怎麼做。test 屬性為 webpack 提供正規表示式，用於確定是否應該應用此模組，在大多數情況下，我們匹配副檔名。loader 或 loaders 給出了我們想要用來將檔案載入到 webpack 中的載入器模組的名稱，並讓該載入器負責該檔案型別的繫結。javascript 上還有一個 query 屬性，這只是為載入器提供了一個查詢字串，所以如果我們想要的話，我們可能也會在 html 載入器上使用查詢屬性。這只是一種不同的做事方式。