令人困惑的webpack之entry

2021-09-17 02:59:49 字數 2649 閱讀 9985

使用webpack快一年了,現在1.x版本都過氣了,但是感覺自己對它那複雜的配置還是很不熟悉,各種路徑,各種loader,各種plugin,又是單頁面又是多頁面... 在vue-cli出來的時候,都不敢用他的webpack模板,主要就是因為webpack的配置檔案看不懂,不敢自己根據需要做修改。現在沉下心來,一點一點的玩弄常用屬性和外掛程式,盡力能自如的進行配置。先拿配置中的entry開始。

最簡單的webpack.config.js檔案:

}配置檔案中entry接受三種形式的值:字串,陣列和物件

物件形式如下:

entry:
最先介紹物件形式,是因為這個是最完整的entry配置,其他形式只是它的簡化形式而已。物件中的每一對屬性對,都代表著乙個入口檔案,因此多頁面配置時,肯定是要用這種形式的entry配置。

key

entry: ,

output:

上面的配置打包後生成:

key還可以是路徑字串。此時webpack會自動生成路徑目錄,並將路徑的最後作為[name]。這個特性在多頁面配置下也是很有用的

entry: ,

output:

上面的配置打包後生成:

上面的配置打包後生成:

value如果是陣列,則陣列中元素需要是上面描述的合理字串值。陣列中的檔案一般是沒有相互依賴關係的,但是又處於某些原因需要將它們打包在一起。比如:

entry:
等價於下面的物件形式:

entry:
等價於下面的物件形式:

entry:
具備了上面的能力,就可以開始配置乙個簡單的多頁面webpack開發環境了。

開始前,要考慮清楚專案目錄結構,使用wepback時,一般要有個src源**目錄和乙個build的打包目錄。

|-build

|-src

webpack.config.js

假設我們有兩個頁面home和about,兩個main.js分別是兩個頁面的入口檔案:

|-src

|-pages

|-about

about.html

main.js

|-home

home.html

main.js

對於複雜點的webpack專案,先決定打包後的目錄結構很重要。webpack就像畫筆,打包後的目錄就像你打算畫的畫,要朝著目標去畫。

假如我希望「畫」是這樣的:

|-build

|-assets

|-js

home.bundle.js

about.bundle.js

home.html

about.html

有了這個結構,html中如何引入js檔案就清楚了,例如在src/pages/home/home.html中:

home page

接下來,朝著build的結構,寫配置檔案webpack.config.js:

var path = require('path')

module.exports = ,

output:

}

在webpack.config.js目錄下執行webpack命令,然後手動將兩個html檔案從src/pages下拷貝到build目錄下,這樣在build目錄下就是乙個打包好的多頁面結構了。

後面將用各種外掛程式,讓webpack打包全自動化,這裡只是乙個簡單的應用例子來了解entry的用法。

entry乙個人能玩的基本就這麼多,一些複雜的配置無非是通過變數的形式給其賦值,完成更靈活的配置。entry是webpack的起點,後面所有的檔案生成,提取css,生成html或者是commonchunk都是在其基礎上進行的加工處理。

令人困惑的strtotime

經常會有人被strtotime結合 1 month,1 month,next month的時候搞得很困惑,然後就會覺得這個函式有點不那麼靠譜,動不動就出問題.用的時候就會很慌 這不,剛剛就有人在微博上又問我 鳥哥,今天是2018 07 31 執行 date y m d strtotime 1 mon...

令人困惑的strtotime

經常會有人被strtotime結合 1 month,1 month,next month的時候搞得很困惑,然後就會覺得這個函式有點不那麼靠譜,動不動就出問題.用的時候就會很慌 這不,剛剛就有人在微博上又問我 今天是2018 07 31 執行 date y m d strtotime 1 month ...

令人困惑的C 語法

include include for size t using namespace std arr 13 run error in vs.net template struct myhash stl template null struct myhash stl template null str...