自動編譯
- watch模式，監(jiān)聽文件變化，自動編譯打包。命令行方式通過--watch
yarn webpack --watch
自動刷新瀏覽器，配合HotModuleReplacementPlugin插件
- browserSync為例：
browser-sync dist --files "*/"
- webpack-dev-server，官方推出的開發(fā)工具，提供開發(fā)服務(wù)器。集成自動編譯和自動刷新瀏覽器等功能
- 安裝webpack-dev-server，為項目安裝了webpack-dev-server-cli
- 命令行啟動
yarn webpack-dev-server // 自動使用webpack打包，并啟動http server運行打包結(jié)果，還能監(jiān)聽文件變化，跟watch模式一樣。
webpack為了提高打包效率，沒有寫到磁盤，而是寫到了內(nèi)存里。所以啟動webpack-dev-server后是看不到打包的dist目錄的，這樣減少了磁盤操作，大大提高了構(gòu)建效率
yarn webpack-dev-server --open // 自動打開瀏覽器
webpack dev server靜態(tài)資源訪問
- webpack dev server 只要是webpack打包輸出的文件，都可以直接被訪問。但是，如果有些其他靜態(tài)也需要serve，就需要告知webpack dev server
- 具體方法是，在webpack.config.js里面新增配置
module.exports = {
......
devServer: {
contentBase: './public', // 指定額外的靜態(tài)資源路徑，可以是字符串或則數(shù)組
hot: true,
open: true,
......
},
},
......
plugins: [
......
// 開發(fā)階段最好不要使用這個插件，因為使用了webpack-dev-server的話，通過contentBase指定了該開發(fā)文件夾里
// 上線的時候再使用，防止頻繁重復(fù)的打包時，每次都執(zhí)行這個插件，這樣開銷就很大，構(gòu)建效率就很低了
// new CopyWebpackPlugin(['public'])
],
}
webpack dev server 代理API
devServer的proxy字段
proxy: {
'/api': {
// http://localhost:8080/api/users -> https://api.github.com/api/users
target: 'https://api.github.com',
// http://localhost:8080/api/users -> https://api.github.com/users
pathRewrite: {
'^/api': '',
},
// 不能使用 localhost:8080 作為請求 GitHub 的主機名
// 因為默認是dev-server通過localhost:8080這個主機名去訪問目標主機，設(shè)為true
// 一般服務(wù)器那邊一般通過主機名去判斷這個請求屬于哪個網(wǎng)站，然后把這個請求給到那個網(wǎng)站
// 主機名是HTTP協(xié)議中的相關(guān)概念
changeOrigin: true, // 這個字段說明看https://github.com/iuap-design/blog/issues/260
},
},
source map 源代碼地圖
- 維持轉(zhuǎn)換后的代碼和源代碼之間的映射關(guān)系
- source map解決了源代碼與運行代碼不一致所產(chǎn)生的問題。
一般有三個文件，一個是混淆壓縮后的代碼.min.js，源文件.js，source map文件***.min.map(里面的sources數(shù)組，指向源文件)，min.js最后一行有下面這一行固定格式
//# sourceMappingURL=jquery-3.4.1.min.map
webpack 配置source map
-
webpack 支持12種不同方式的source map
屏幕快照 2021-06-29 23.30.41.png 每種方式的效率和效果各不相同
那應(yīng)該使用哪一種呢？
-
eval模式，eval是js函數(shù)，可以通過字符串運行js代碼
運行時，是另外開一個虛擬機的方式運行里面的js代碼
在eval后面添加 //# sourceURL=./foo/bar.js。那么它的運行環(huán)境就變成foo/bar.js。意味這可以通過sourceURL改變eval運行環(huán)境的名稱，但其實它還是運行在虛擬機環(huán)境當(dāng)中，只不過告訴了執(zhí)行引擎這個執(zhí)行代碼的執(zhí)行路徑，這只是個標識。
屏幕快照 2021-06-29 23.35.33.png
devtool: eval打包后，不會生產(chǎn)sourcemap文件，只是在每個模塊的eval最后面添加 文件路徑，告訴引擎，報錯的是哪個文件。所以它的構(gòu)建速度是最快的，但是效果是最差的，沒有報錯的行列信息。
webpack devtool模式對比
1、eval、eval-source-map（有行有列）、cheap-eval-source-map（只有行沒有列，映射loader處理后的）、cheap-module-eval-source-map（只有行沒有列，但是映射的是源碼）
- eval -是否使用eval執(zhí)行代碼模塊
- cheap - Source Map是否包含行信息
- module - 是否能夠得到Loader處理之前的源代碼
2、inline -- source map：使用的是dataUrl的方式嵌入到代碼當(dāng)中，這種是最不可能用到的。
3、hidden --source map，構(gòu)建后的代碼沒有通過注釋的方式引用source map。
4、nosources 能看到錯誤的文件，但是沒有源代碼，只有行列信息，在開發(fā)者工具點擊錯誤的時候，不會找到源代碼，這樣是保護我們的源代碼。
webpack選擇Source Map模式（建議）
1、開發(fā)環(huán)境下會選擇：cheap-module-eval-source-map
- 我的代碼每行不會超過80個字符，那這樣定位到行就夠了
- 我的代碼經(jīng)過Loader轉(zhuǎn)換過后的差異較大，例如使用了Vue之類的框架
- 雖然這種模式打包啟動的速度慢些，但是首次打包速度慢無所謂，項目使用webpack-dev-server以監(jiān)視模式打包，而不是啟動打包，重寫打包相對較快。
2、生產(chǎn)模式的打包：選擇none，如果真的有必要可以使用nosources-source-map，只暴露源代碼的位置，而不是暴露內(nèi)容 - Source Map會暴露源代碼，會被稍有技術(shù)的人，很容易泄露代碼
- 調(diào)試是開發(fā)階段的事情
