說說你對webpack的理解
webpack 是一個靜態模塊打包器，整個打包過程就像是一條生產線，把資源從入口放進去，經過一系列的加工（loader），最終轉換成我們想要的結果，整個加工過程還會有監控，在特定的時機，插件就會對資源做處理
Webpack中Loader和Plugin的區別
- 1、因為webpack只認識JS和JSON，所以Loader相當于翻譯官，將其他類型資源進行預處理。
- 2、Plugin功能更強大，主要目的就是解決loader 無法實現的事情，比如打包優化和代碼壓縮等。
Plugin加載后，在webpack構建的某個時間節點就會觸發plugin定義的功能，幫助webpack做一些事情。實現對webpack的功能擴展。
常見的Plugin有哪些
html-webpack-plugin 處理html資源，默認會創建一個空的HTML，自動引入打包輸出的所有資源（js/css）
mini-css-extract-plugin 打包過后的css在js文件里，該插件可以把css單獨抽出來
clean-webpack-plugin 每次打包時候，CleanWebpackPlugin 插件就會自動把上一次打的包刪除 - 3、運行時機
1.loader運行在編譯階段
2.plugins 在整個周期都
為什么要用打包工具（開發環境和生存環境有什么區別）
在沒有weapack之前，
- 作用域問題：所有引用的文件，都掛在在window，如jquery
- 文件太大：如果分散加載，內容逐漸顯示，如果合并加載文件太大，白屏時間長
- 可讀性差：和在一個文件里，可讀性差
- 可維護性弱
基本配置：
開發模式配置介紹：
loader：幫助webpack識別不能識別的模塊，只要是對，less/scss/style/jsx/tsx/圖片/視頻
- style-loader
- css-loader
plugins
devServer
webpack優化
1、提升開發體驗
-
1、sourceMap
2、提升打包構建速度（一般是對js處理）
1、 開啟HMR：修改那個文件只會刷新那一個文件，不會整個頁面刷新
- 上面那樣配置css就可以生效了
- js還需要另外的配置，react可以使用react-hot-loader來設置
2、oneOf：讓我們的文件只被其中一個loader文件處理，每個文件只執行一個loader，提升打包速度
3、Include/Exclude：排除第三方和nodeModule文件，這些不需要編譯，只處理src文件，提升打包速度（只能用一種），只能對js進行處理
4、catch：提升第二次編輯及以后的打包速度，第二次打包不會打包所有。只會檢查修改的文件進行重新檢查和babel編譯
5、Thead：多進程打包
配置方法：
js代碼壓縮：
減少代碼體積
1、tree shaking：引用的第三方庫中，移除沒有引用的工具函數等
2、plugin-transform-runtime：減少babel打包的文件體積
3、圖片壓縮
優化代碼運行性能
code split 代碼分割，實現按需加載
webpack5和webpack4區別（https://juejin.cn/post/6990869970385109005）
- Tree Shaking：自動剔除第三方包里面沒有引入的方法
當我們引入第三方包的時候，如果只引入的一個方法，其他沒有用到的方法是冗余放入，Tree Shaking就可以自動幫我們把那些沒有用的東西提出掉，來減少bundle的體積 - webpack4需要安裝插件 terser-webpack-plugin 才能實現js壓縮，webpack5內置了插件不需要安裝，而且設置mode=“production” 的時候會自動開啟 js 壓縮功能。
- webpack5 內部內置了 cache 緩存機制。直接配置即
// webpack.config.js
module.exports= {// 使用持久化緩存cache: {type: 'filesystem'，cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')}
}
git
- 1、git pull和git fetch的區別
- git fetch只是將遠程倉庫的最新的版本下載到本地，但是不會自動merge,相當于工作區中的文件并沒有更新
- git pull會從遠程倉庫獲取到最新的版本并merge到本地。
- git pull origin dev=git fetch origin dev+git merge origin/dev;
- git fetch更保險一些，git pull操作更簡單
- 2、git merge和git rebase的區別
- 共同點：將一個分支的更改并入另一個分支，只不過方式有些不同
- 不同點：
- merge如果master有新提交，合并之后有沖突，僅需修改之后重新提交，后會生一個新的commit，整個歷史記錄比較混亂
- rebase如果master有新提交，合并之后有沖突，不會產生額外的commit。這樣的好處是，‘干凈’；如果合并的分支中存在多個commit，需要重復處理多次沖突。
