webpack(5) -開發環境

使用 source map （僅用於開發環境）

當 webpack 打包源代碼時，可能會很難追蹤到 error(錯誤) 和 warning(警告) 在源代碼中的原始位置。例如，若是將三個源文件（a.js, b.js 和 c.js）打包到一個 bundle（bundle.js）中，而其中一個源文件包含一個錯誤，那麼堆棧跟蹤就會直接指向到 bundle.js。你可能須要準確地知道錯誤來自於哪一個源文件，因此這種提示這一般不會提供太多幫助。

爲了更容易地追蹤 error 和 warning，JavaScript 提供了 source map 功能，能夠將編譯後的代碼映射回原始源代碼。若是一個錯誤來自於 b.js，source map 就會明確的告訴你。

//webpack.config.js 配置文件中加入
devtool: 'inline-source-map'

 

 

選擇一個開發工具

1. webpack watch mode(webpack 觀察模式)

   • 指示 webpack "watch" 依賴圖中全部文件的更改。若是其中一個文件被更新，代碼將被從新編譯，因此你沒必要再去手動運行整個構建。

   • //在package.json中
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch": "webpack --watch", "build": "webpack"
       },

     而後運行 npm run watch  ,當你改變一個文件時候，代碼就會自動從新編譯

   • 缺點：須要手動刷新瀏覽器獲取最新的結果

2. webpack-dev-server   （用的最多）

   • 提供了一個簡單的 web server，而且具備 live reloading(實時從新加載) 功能

   • npm install --save-dev webpack-dev-server

      

     //在webpack.config.js中加入 
     //配置告知 ，將  目錄下的文件 serve 到  下。（譯註：serve，將資源做爲 server 的可訪問文件）
     //webpack-dev-server 在編譯以後不會寫入到任何輸出文件。而是將 bundle 文件保留在內存中，而後將它們 serve 到 server 中，就好像它們是掛載在 server 根路徑上的真實文件同樣
      devServer: {
         contentBase: './dist'
       },webpack-dev-serverdistlocalhost:8080

      

      //在package.json中添加 npm scripts
      "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "watch": "webpack --watch",
         "start": "webpack-dev-server --open", "build": "webpack"
       },

     而後運行 npm start (不要加run)，這時候會自動在瀏覽器中打開頁面，而後修改任何資源保存，web server 將在編譯代碼後自動從新加載（瀏覽器會自動更新，無需手動刷新）

   • webpack-dev-server 在編譯以後不會寫入到任何輸出文件，即dist文件夾中是空的，沒有任何文件！！！

　　三、webpack-dev-middleware  詳見官網：https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-source-map