當 webpack 打包源**時，可能會很難追蹤到 error(錯誤) 和 warning(警告) 在源**中的原始位置。例如，如果將三個原始檔（a.js,b.js和c.js）打包到乙個 bundle（bundle.js）中，而其中乙個原始檔包含乙個錯誤，那麼堆疊跟蹤就會直接指向到bundle.js。你可能需要準確地知道錯誤來自於哪個原始檔，所以這種提示這通常不會提供太多幫助。
為了更容易地追蹤 error 和 warning，j**ascript 提供了 source map 功能，可以將編譯後的**對映回原始源**。如果乙個錯誤來自於b.js，source map 就會明確的告訴你。
//webpack.config.js 配置檔案中加入
devtool: 'inline-source-map'
npm install --s**e-dev webpack-dev-server
//在webpack.config.js中加入//配置告知
webpack-dev-server，將dist目錄下的檔案 serve 到localhost:8080下。（譯註：serve，將資源作為 server 的可訪問檔案）//webpack-dev-server 在編譯之後不會寫入到任何輸出檔案。而是將 bundle 檔案保留在記憶體中，然後將它們 serve 到 server 中，就好像它們是掛載在 server 根路徑上的真實檔案一樣
devserver: ,
//在package.json中新增 npm scripts"scripts": ,
webpack-dev-server 在編譯之後不會寫入到任何輸出檔案，即dist資料夾中是空的，沒有任何檔案！！！
webpack5配置問題
問題描述 安裝webpack dev server 4.7.4 在package.json的scripts中增加 script 執行起來後只顯示public index.html的模版頁面，js檔案並沒載入進來。檢視了下輸出 content not from webpack is served fr...
Webpack5 區分開發和生成環境配置
對於專案的開發和生產打包，這兩種情況下，我們通常需要不同的webpack配置。有如下兩種方法，可以針對不同環境 應用不同的 webpack 配置。webpack.config.js module.exports env,ar if env env.production return config 執...
Webpack5 常用Plugin（外掛程式）
webpack的外掛程式，可以增強webpack的自動化能力，使用外掛程式，可以完成自動清空目錄 拷貝資源檔案 壓縮輸出 等功能。webpack的乙個個外掛程式，就是在 webpack生命週期的鉤子上掛載的乙個個任務。常用的webpack外掛程式 作用clean webpack plugin 在每次...