【webpack4x】實戰配置及問題解析

目錄

1、Library打包

2、Progressive Web Application(PWA)打包配置

3、TypeScript的打包配置

4、WebpackDevServer實現請求轉發

5、WebpackDevServer解決單頁面應用路由問題

6、EsLint在webpack中的配置

7、提高webpack打包速度的方法

8、多頁面打包配置

 

1、 library打包

場景1：

如今咱們寫了一個庫

1

2. 外部引入咱們的庫可能存在的語法

3. 須要咱們的庫能夠支持

配置libraryTarget： ’umd‘支持上述的前三種方法，對於最後一種使用辦法，能夠經過library: 'library'綁定到一個全局變量library上

4. 其餘

這裏能夠綁定到window或者this或者global上等

場景2：

有時候須要在本身的庫中引入別人的庫，作了一些處理。而後某個用戶使用了咱們的庫，又使用了咱們的庫中使用的庫，那麼就會重複引入兩次一個庫。

解決辦法：

commonjs:'lodash'表示在commonjs語法中，引入名字必須是lodash
root:'_'表示，使用script標籤引入的時候，可使用_使用
一般狀況下，若是沒有特殊說明，能夠直接這麼設置：

小結：

externals表示的是，不打包到庫裏面，只有在用戶使用的時候，才引入和打包

場景3： 別人怎麼使用

1. 刪除掉index.html

2.

3. 到npm網站上註冊一個帳號

而後到cmd上 npm adduser
而後npm publish
把包發佈到上面就能夠了。

 

2、Progressive Web Application(PWA)打包配置

1. PWA是什麼技術？

當咱們訪問一個網站，第一次訪問沒有問題，後續掛掉了，能從緩存中讀取出來這個網頁。

2. 安裝插件

3.

4.

5. 在項目中應用

6.打包完之後

 

3、TypeScript的打包配置

場景： ts項目編譯成瀏覽器能夠運行的js

1.

2.新建tsconfig.json

3. 配置webpack

4. 打包命令

5. 遇到問題： 使用lodash中的一些函數，ts不報錯

以上是新版本ts推薦的方式

 

4、WebpackDevServer實現請求轉發

場景1： 在實際項目中，咱們請求數據的地址不會徹底寫死

須要配置下轉發請求的地址：

當咱們請求/react/api下接口的時候，都幫我代理到http://xxxxxx下

場景2： 實際須要請求header.json數據，可是後端尚未寫好，須要先請求下demo.json

解決辦法

（要注意的是，這個devServer只在開發的時候有，線上的時候不存在）

場景3： 請求轉發，轉發到https’

場景4 多個路徑，吧路徑放在context中管理

場景5 對根目錄進行轉發

必須得設置inde: ''或者false纔會生效

場景6 有些網站對origin進行了限制，防止外部爬蟲，解決限制（建議作代理轉發的時候，時刻加上這個）

場景7 還能夠作大量配置（具體查看文檔），例如作請求轉發的時候，headers裏面進行配置

其餘1.

以/api開頭的都去掉

其餘2.

當識別到請求的是一個html文件的時候，直接跳過本次請求

 

5、WebpackDevServer解決單頁面應用路由問題

問題分析：

使用react路由去訪問/list的時候，devServer覺得你訪問的是一個/list.html頁面，結果服務器沒有這個頁面，致使了錯誤，

解決辦法：

特別須要處理的地址的時候，能夠這麼配置

跳轉到哪兒，還能夠這樣配置

其餘須要注意：
項目上線後，可能會遇到相似的問題，須要後端的小夥伴配置上述相似的跳轉規則

 

6、EsLint在webpack中的配置

場景1：傳統vsCode+插件eslint對代碼格式約束

1.

2.

3. 結合vsCode插件eslint

上述表示，使用Airbnb的eslint規範，同時也忽略無狀態class和jsx的提示

場景2：

webpack配置使得eslint生效（一般不會這麼處理，由於會影響打包的速度）

上述配置了eslint-loader，而且自動處理一些簡單的代碼，注意放在最早處理，若是放錯能夠強制處理

打包出問題的時候，直接在瀏覽器上彈出一層錯誤提示

 

7、提高webpack打包速度的方法

1. 跟上技術的迭代（Node,Npm,Yarn）

2. 在儘量少的模塊上應用loader

例如：

3. 儘量使用一些社區中較好的插件

優化1： 每次打包的時候，好比第三方模塊，第一次打包後後續打包直接使用上一次的代碼分析，提升打包速度（也就是說第三方包只打包一次）

上述操做主要：將react等這三個庫，打包到vendors.dll.js中，而且暴露一個全局變量名vendors

問題1：

單獨對第三方包打包，可是如今全局使用不了vendors

解決：

而後在配置文件中：

往index.html中添加
再次打包打開，引入成功

問題2： 咱們引入第三方模塊的時候，要去使用打包後的第三方包

和配置

使得webpack打包的時候，會根據咱們打包出來的第三方包和打包分析出來的vendors.manifest.json這個文件，當打包遇到使用了這個映射文件中的第三方包的時候，就會知道，沒有必要吧這個第三方模塊打包了，直接去底層全局變量拿出來使用。

問題3： 可能會對第三方模塊進行拆分，分紅好幾個*.dll.js

而後須要不斷的配置

解決辦法：

優化2：控制包文件大小

對於源代碼不適用的包，能夠經過tree shaking閹割，或者不引入使用

優化3： thread-loader,parallel-webpack,happypack多進程打包

優化4：合理使用sourceMap，

優化5：結合stats分析打包結果

優化6： 開發環境內存編譯

優化7： 開發環境無用插件剔除（例如，開發環境就用development不用production，不要像線上環境去使用一些插件）

須要將來在實戰中不斷積累經驗

其餘1：

支持js和jsx（可是在組件中引入的時候要加上jsx，不然報錯）

其餘2：

上述優化

使得支持（後綴爲js或jsx）

其餘3：

引入一個文件夾名稱的時候，首先默認找到文件夾下的index.js（會影響打包速度）

其餘4：

引入一個不存在文件（或者別名），會報錯，解決辦法

 

8、多頁面打包配置

1.入口配置

2.輸出模板配置

繼續優化，每一個頁面須要引入的包，使用chunks屬性

繼續優化，每次添加一個就須要複製一個相似的代碼，使用一個方法根據多少個入口進行生成（包括對優化1中的代碼提取結合進來）