Webpack實戰配置

這是我參與更文挑戰的第3天，活動詳情查看：更文挑戰

webpackDevServe的做用是什麼？

每一次，咱們改變完了咱們的代碼，若是想正確的可以在瀏覽器上運行，都須要在npm run build後手動打開dist目錄下的html文件，這樣辦才能實現代碼的從新編譯運行。這樣的話，實際上咱們的開發效率是很是低下的。我但願若是我改動了代碼，那麼dist目錄就會自動從新打包，若是能達到這種效果就不用每次打包後手動開啓html了，下面咱們來看下如何實現。

// 安裝 npm i -D webapck-dev-server
module.exports = {
    devServer: {
        open: true,
        port: 3000,
        hot: true,
        hotOnly: true
    },
}
複製代碼

咱們藉助devServer開啓了一個本地服務器

• open是什麼意思呢？
  • 意思是在運行npm run dev啓動webpackDevServe的時候open會自動幫你打開一個瀏覽器，而後自動地訪問你本地的地址，默認就是localhost:8080;
• port是什麼意思呢？
  • 意思是設置啓動的端口號，默認是8080，若是須要進行更改就使用port，例如上述代碼把端口號改成3000運行；
• hot是什麼意思呢？
  • 啓用webpack的熱模塊替換特性。DevServe默認的行爲是在發現源代碼背更新後會經過自動刷新整個頁面來作到實現預覽，開啓模塊熱替換功能後在不刷新整個頁面的狀況下經過用新模塊替換老老模塊來實現實時預覽。
• hot和hotOnly的區別是什麼？
  • 單純設置hot爲true，若是編譯報錯，會拋出錯誤，你從新改爲正確的，這個時候又會觸發從新編譯，整個瀏覽器都會從新刷新!
  • 把hotOnly也設置的話，若是編譯報錯，你在改爲正確的，從新編譯，瀏覽器不會刷新!

如何配置source-map？

什麼是Source Map?

在前端開發過程當中，一般咱們編寫的源代碼會通過多重處理(編譯 封裝 壓縮等)，最後造成產物代碼。因而在瀏覽器中調試產物代碼時，咱們每每會發現代碼變得面目全非，報了一個錯卻找不到在哪一行，所以，咱們須要一種在調試時將產物代碼顯示回源代碼的功能，source map就是實現這一目標的工具。

對於同一個源文件，根據不一樣的目標，能夠生成不一樣效果的source map。它們在構建速度 質量 訪問方式和文件大小等方面各不相同。在開發環境和生產環境下，咱們對於source map功能的指望也有所不一樣：

• 在開發環境中，一般咱們關注的是構建速度快，質量高，以便提高開發效率，而不關注生成文件的大小和訪問方式。
• 在生產環境中，一般咱們更關注是否須要提供線上 soource map，生成的文件大小和訪問方式是否會對頁面性能形成影響等，其次纔是質量和構建速度。

module.exports = {
    mode: 'development',
    devtool: 'eval-cheap-modulesource-map',
}
複製代碼

source map的預設有不少想了解的能夠去官網查閱，不一樣的預設會影響到構建的速度以及包的大小和生成方式,若是在生產環境中不須要查看報錯行數的能夠不設source map提高頁面性能。

開發環境預設推薦eval-cheap-modulesource-map它的質量與初次/再次構建速度都屬於次優級，以犧牲定位到列的功能爲代價換取更快的構建速度一般也是值得的。

總結

以上就是webpack中比較經常使用的一些實戰配置了，詳細配置還請翻閱文檔進行學習；