webpack插件機制是為了增強webpack在項目自動化構建方面的能力（解決除loader資源模塊打包外的其他自動化工作）
常見應用場景：
-
實現(xiàn)自動在打包之前清除dist目錄壕吹，clean-webpack-plugin
每次打包都會覆蓋到dist目錄，只能覆蓋同名文件，需要配置output.path
-
自動生成應用所需的HTML文件，html-webpack-plugin
在html中自動注入webpack打包生成的bundle
根據(jù)不同環(huán)境為代碼注入類似API地址這種可能變化的部分
拷貝不需要參與打包的資源文件到輸出目錄瞧毙，copy-webpack-plugin
壓縮webpack打包完成后輸出的文件
自動發(fā)布打包結果到服務器實現(xiàn)自動部署
開發(fā)一個插件
webpack的插件機制是軟件開發(fā)中最常見的鉤子機制（類似web中的事件）
在webpack整個工作過程有很多環(huán)節(jié)，便于插件的擴展，webpack在每個環(huán)節(jié)都埋下一顆鉤子百侧，這樣開發(fā)插件的時候介却，通過往這些節(jié)點掛在不同的任務谴供，就可以輕松擴展webpack的能力
需求：清除webpack打包結果的注釋
探索webpack運行機制和核心工作原理
了解webpack整個工作過程細節(jié) （查閱代碼）
例子
使用Dev Server提高本地開發(fā)效率
開發(fā)過程：編寫源代碼 --> webpack打包 --> 運行應用 --> 瀏覽器查看
提高開發(fā)效率（webpack已經(jīng)提供相應功能）
使用 HTTP 服務運行而不是文件形式預覽，一來更接近生產(chǎn)環(huán)境狀態(tài)齿坷，二來項目使用AJAX等API
修改代碼后webpack自動構建桂肌，瀏覽器即時顯示最新結果
提供Source Map支持，快速定位源代碼位置
webpack自動編譯
使用webpack-cli提供的watch工作模式
啟動添加--watch參數(shù)永淌，打包完成cli不會退出
初次構建后崎场，項目中源文件會被監(jiān)視
發(fā)生更改，webpack會自動重新運行打包任務
此時開發(fā)體驗修改代碼 → Webpack 自動打包 → 手動刷新瀏覽器 → 預覽運行結果
需要用到serve 直接運行靜態(tài)資源 serve dist
接著使用BrowserSync實現(xiàn)瀏覽器自動刷新 browser-sync dist --watch
此時開發(fā)體驗 修改代碼 → Webpack 自動打包 → 自動刷新瀏覽器 → 預覽運行結果
原理：webpack監(jiān)視源代碼變化遂蛀，自動打包谭跨，dist 目錄被BrowserSync監(jiān)聽，自動編譯并刷新瀏覽器
例子
Webpack Dev Server
官方推出開發(fā)工具李滴，提供開發(fā)服務器螃宙，集成自動編譯和自動刷新瀏覽器
使用需要通過npm引入
運行webpack-dev-server過程
內(nèi)部啟動一個Http server，為打包結果提供靜態(tài)文件服務所坯，并自動使用webpack打包我們應用
-
監(jiān)聽源代碼變化谆扎，變化后重新打包
image-20201113142533359.png
配置選項
devServer專門用來為webpack-dev-server提供配置
// ./webpack.config.js
const path = require("path");
module.exports = {
// ...
devServer: {
proxy: {
"/api": {
target: "https://api.github.com",
pathRewrite: {
"^/api": "" // 替換掉代理地址中的 /api
},
changeOrigin: true // 確保請求 GitHub 的主機名就是：api.github.com
}
},
contentBase: path.join(__dirname, "dist"), // 靜態(tài)資源路徑 開發(fā)階段最好不要使用copyWebpackPlugin插件
compress: true,
port: 9000
// ...
// 詳細配置文檔：https://webpack.js.org/configuration/dev-server/
}
};
webpack常用功能
-
靜態(tài)資源訪問
contentBase 指定額外的靜態(tài)資源路徑，類似copy-webpack-plugin
-
Proxy 代理
處理跨域請求
