Webpack之部分配置

2022-06-15 10:48:12 字數 1609 閱讀 9598

1、熱更新

@package.json

"dev": "webpack-dev-server --config webpack.dev.js --open"

@webpack.prod.js

devserver: ,

2、什麼是檔案指紋

打包後輸出的檔名的字尾。一般用作版本的管理,對於沒有修改的檔案,可以繼續使用瀏覽器的快取,加快頁面的訪問。

3、檔案指紋的型別:

hash:和整個專案的構建相關,只要專案檔案有修改,整個專案構建的hash值就會更改

chunkhash:和webpack打包的chunk有關 不同的entry會生成不同的chunkhash值

contenthash:根據檔案內容來定義hash,檔案內容不變,則contenthash不變

4、js檔案的壓縮

內建了uglifyjs-webpack-plugin

5、css檔案的壓縮

使用optimize-css-assets-webpack-plugin

同時使用cssnano

6、html檔案的壓縮

修改html-webpack-plugin,設定壓縮引數

7、自動清理構建目錄

clean-webpack-plugin

8、如何在編寫css時不需要新增字首?

postcss外掛程式autoprefixer自動補齊css3字首

),

],},

},], // 解析less

},

9、移動端css px自動轉換成rem

使用px2rem-loader lib-flexible

npm install px2rem-loader -d

npm install lib-flexible -s

,

},], // 解析less

},

rem和px的對比:

10、靜態資源內聯

資源內聯的意義

**層面:

請求層面: 減少http網路請求數

css內聯

方案一: 借助 style-loader

方案二:html-inline-css-webpack-plugin

11、多頁面應用打包通用方案

npm i glob -d

12、使用sourcemap

作用:通過source map 定位到源**

開發環境開啟,線上環境關閉

13、基礎庫分離

Webpack部分loader配置解析

url loader file loader mini css extract plugin loaderconst minics tractplugin require mini css extract plugin plugins new minics tractplugin 存在的問題 pos...

Apache 部分配置說明

1.禁止瀏覽目錄 例如 options indexes allowoverride none order allow,deny allow from all 將 indexes 去掉或者或者修改為 indexes 即可。2.限制日誌檔案大小 access.log 檔案在 web 伺服器執行一段時間之...

OSPF部分配置介紹

ospf 程序配置 ospf 程序號 用來開啟 ospf 程序的,只在本地有效,可以用no和 clear 來刪除和重啟 ospf程序 上圖所示無法分配路由器 id的原因是,所有介面都沒有配置 ip位址 show ip opsf 可以用來檢視本地路由器的 ospf 程序號和路由器 id,還可以看本地的...