初識 Webpack 配置source-map和watch的用法

• source-map

即源碼映射內容，在解析 js 的過程中可能需要將高級語法解析成低級語法，這裏就需要配置label相關內容；

1、安裝依賴

npm install @babel/core @babel/preset-env babel-loader  webpack-dev-server -D

2、添加index.js內容

console.log('home')

/* es6語法,es6->es5會變成構造函數 */
class Log {
	constructor() {
		console.log('error')
	}
}
let log = new Log();

 

3、添加babel配置

...
    module:{
		rules:[
			{
				test: /\.js$/,
				use:{
					loader:'babel-loader',
					options:{
						presets:['@babel/preset-env']
					}
				}
			}
		]
	},
...

3、對package.json進行配置

...    
    "scripts": {
		"build": "webpack --config webpack.config.js",
		"dev": "webpack-dev-server",
		"test": "echo \"Error: no test specified\" && exit 1"
	},
...

4、 啓動服務

npm run dev

1.  控制檯正常輸出 
2. 隨便新增錯誤，點擊進去bundle.js:2是打包後的結果，無法定位錯誤（期望效果有一個映射文件，當點擊的時候看到錯誤是源碼而不是打包內容） 
3. 添加源碼映射devtool

   // 1) 源碼映射 會單獨生成一個sourcemap 文件 出錯了 會標識 當前報錯的列和行
   	devtool:'source-map', // 添加映射文件 可以幫我們調試源代碼

    

4. 總結

   entry: __dirname + "/src/index.js",
   	// 1) 源碼映射 source-map:會單獨生成一個sourcemap 文件 出錯了 會標識 當前報錯的列和行,特點:大而全
   	// 2) 源碼映射 evl-source-map:不會單獨生成一個單獨文件 出錯了 會標識 當前報錯的列和行,特點:放到打包後的文件中如bundle.js
   	// 3) 源碼映射 cheap-module-source-map:不會生成列,但是是一個單獨文件 特點:產生後你可以保留起來用作調試
   	// 4) 源碼映射 cheap-module-eval-source-map:不會產生文件,但是集成在打包後的文件中,不會產生列 特點:產生後你可以保留起來用作調試
   	devtool:'cheap-module-eval-source-map', // 添加映射文件 可以幫我們調試源代碼

5. 代碼

   鏈接：https://pan.baidu.com/s/1vIG2VFg3q10Wmeygz381vg 
   提取碼：vrk6 
   複製這段內容後打開百度網盤手機App，操作更方便哦

    

---

• 實時打包watch

webpack我們並不希望每次啓動的時候都通過npm run build重新打包一次，但是webpack-dev-server的特點不能馬上看到實體文件，我們希望改完代碼就能看到實體文件，如何實現呢？

• 配置watch

監控當前代碼變化，代碼一變化就實時打包，如在index.js中先是console.lo('xx')再執行npm run build，此時項目處於打包但是未啓動狀態，如果開啓了watch爲true，則當我們修改index.js內容爲console.log('xx')時，再刷新瀏覽器界面，報錯將會消失。

• watch 參數

watchOptions: { // 監控的選項
		poll: 1000, // 多少秒監控一次
		aggregateTimeout: 500, // 防抖 (一直輸入代碼,如500ms內,一直輸入的情況下,只打包一次)
		ignored: /node_module/, // 有一個文件夾可以不監控
	},