開發時需要除錯**，在打包過後如果出錯我們就需要除錯工具來幫我們改正錯誤。source map就是幫我們解決這個難題的。他要在我們的webpack.config.js檔案中進行配置，屬性名為devtool，他有四種選項來讓使用者來選擇。
1、source-map: 在乙個單獨的檔案中產生乙個完整且功能完全的檔案。這個檔案具有最好的source map，但是它會減慢打包檔案的構建速度；
2、cheap-module-source-map: 在乙個單獨的檔案中生成乙個不帶列對映的map，不帶列對映提高專案構建速度，但是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對除錯造成不便；
3、eval-source-map: 使用eval打包原始檔模組，在同乙個檔案中生成乾淨的完整的source map。這個選項可以在不影響構建速度的前提下生成完整的sourcemap，但是對打包後輸出的js檔案的執行具有效能和安全的隱患。不過在開發階段這是乙個非常好的選項，但是在生產階段一定不要用這個選項；
4、cheap-module-eval-source-map: 這是在打包檔案時最快的生成source map的方法，生成的source map 會和打包後的j**ascript檔案同行顯示，沒有列對映，和eval-source-map選項具有相似的缺點。
原文：
使用webpack構建本地伺服器
webpack提供乙個可選的可以檢測**的修改並自動重新整理頁面的本地伺服器。該伺服器是基於node.js的，不過我們需要單獨安裝它作為專案依賴。
npm install --s**e-dev webpack-dev-server
devserver作為webpack配置選項中的一項，以下是它的一些主要配置選項：
1、contentbase: 預設webpack-dev-server會為根資料夾提供本地伺服器，如果想為另外乙個目錄下的檔案提供本地伺服器，應該在這裡設定其所在目錄（本例設定到「public"目錄）
2、port: 設定預設監聽埠，如果省略，預設為「8080」
3、inline: 設定為true，當原始檔改變時會自動重新整理頁面
4、historyapifallback: 在開發單頁應用時非常有用，它依賴於html5 history api，如果設定為true，所有的跳轉將指向index.html
原文：
webpack生產環境和開發環境的配置
最近在做公司遊戲預約頁面的時候，在配置webpack的時候，忽略了生產模式切換，導致開發過程中有些痛苦，當改動樣式或者某個外掛程式配置時，本地server要等待編譯很久才生效。用了很久的webpack做開發，之前一直沒太在意，現在特地整理下，也為以後做專案更加規範吧。在配置前，還是先了解下生產環境和...
webpack環境 開發環境和生產環境的區分
模組熱更新 sourcemap 介面 規範檢查 生產環境的需求 提取公共 壓縮混淆 檔案壓縮 base64編碼 去除無用的 二者共同點 同樣的入口 同樣的 處理 loader處理 同樣的解析配置 使用webpack merge拼接開發環境和生產環境 配置檔案 webpack.dev.conf.js ...
webpack實現開發 測試 生產等環境的打包切換
使用webpack構建的工程，在開發過程中不同環境的配置不同，在各種環境的打包切換過程中需要手動修改相關配置達到預期目的。但是每次都手動修改會比較麻煩，本文簡單介紹如何通過對webpack進行配置，實現不同環境打包分類配置 1.修改build資料夾下build.js檔案 新增宣告變數 修改前 修改後...