webpack 完整入門學習筆記(二)

2022-08-27 04:36:09 字數 1270 閱讀 1051

在第一節配置webpack的配置檔案,這一節我們就對裡面一些配置進行一下探索,entry入口檔案配置可以配置字串,也可以配置陣列,也可以配置物件

其中字串模式和陣列都可以算作是單頁面入口

字串

const config =
陣列

const config =
發現這樣寫,並沒有什麼卵用,好像只載入了第乙個,main.js並沒有載入

利用陣列模式,可以一次注入多個依賴檔案,然後生成到乙個檔案中

物件語法是乙個多頁面入口,你可以將每個檔案單獨輸出為乙個檔案

物件語法

const config = 

}

這個就會生成兩個檔案,但是這樣寫完直接執行專案,是會有問題的,因為兩個檔案最後輸出的名字都是一樣的,所以需要修改輸出口配置

現在執行命令看看結果:

能夠發現在dist裡面生成了兩個js檔案

引數說明

[name]這個就是檔案的名字,寫成這樣就是預設entry裡面寫的名字

[hash:8]這個是雜湊,為了保證每個檔案的唯一性,可以在檔案生成時新增乙個雜湊字串,後面的8表示生成長度為8的字串

output輸出檔案的常規配置引數如下:

引數說明

filename

這個是表示輸出的檔案的名字,可以單純是乙個名字,也可以是乙個表示檔案路徑的字串,表示檔案將生成輸出到這個路徑,這個路徑是相對於另乙個引數path而言的

path

這個表示將輸出檔案存放在**

publicpath

表示最終輸出檔案的公共路徑,如果不知道,可以留空,然後在入口檔案中動態設定,"__webpack__public__path=myruntimepublicpath",查閱一些資料,說白了就是靜態資源的位置路徑,是完整的

output詳情

這個publicpath暫時沒有搞懂,不知道怎麼弄?暫留。至於output的其他配置就不說了

webpack學習入門

css loader 輔助解析 js 中的 import main.css style loader 把 js 中引入的 css 內容 注入到 html 標籤中,並新增 style 標籤.依賴 css loader sass loader 載入 sass postcss loader css 的預處...

webpack完整配置

這裡簡單學習了一下webpack的配置 首先是webpack.development.js const path require path const stylelintplugin require stylelint webpack plugin const htmlwebpackplugin r...

Webpack學習筆記

自我總結 如其名,一些入口處的引導檔案 定義 output 位於物件最頂級鍵 key 包括了一組選項,指示 webpack 如何去輸出 以及在 輸出你的 bundle asset 和其他你所打包或使用 webpack 載入的任何內容 自我總結 這個也沒什麼說的,如其名,定義了最終生成檔案的位址以及其...