webpack知識總結

標籤：too   本地   tool   top   多個   外掛程式   style   tps   依賴   

學習地址：
1190000006178770

1.webpack：模組打包機（分析你的項目結構，找到
JavaScript模組以及其它的一些瀏覽器不能直接啟動並執行拓
展語言（Scss，TypeScript等），並將其打包為合適的格
式以供瀏覽器使用。）

2.安裝：

//全域安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
//初始化
npm init

3.功能：

//產生Source Maps（使調試更容易）
devtool選項配置結果
source-map
cheap-module-source-map
eval-source-map（開發中經常用的）
cheap-module-eval-source-map

//使用webpack構建本機伺服器
npm install --save-dev webpack-dev-server

//Loaders
test：一個匹配loaders所處理的檔案的拓展名
的Regex（必須）
loader：loader的名稱（必須）
include/exclude:手動添加必須處理的檔案（文
件夾）或屏蔽不需要處理的檔案（檔案夾）（可選）；
query：為loaders提供額外的設定選項（可選）

loaders有：
處理js檔案的:babel
處理css檔案的:style-loader,css-
loader,postcss-loader
處理html檔案的:html-loader
處理模版檔案的:ejs-loader等
處理json檔案的:json-loader
處理圖片檔案的:file-loader url-loader
image-webpack-loader

//Babel：編譯JavaScript的平台 （es6,jsx等
）
npm一次性安裝多個相依模組，模組之間用空格
隔開
npm install --save-dev babel-core babel-
loader babel-preset-es2015 babel-preset-react

//css：css-loader使你能夠使用類似@import
和 url(...)的方法實現 require()的功能,style-loader
將所有的計算後的樣式加入頁面中
CSS module：通過CSS模組，所有的類名，動畫
名預設都只作用於當前模組
CSS前置處理器：sass/less

PostCSS：首先安裝postcss-loader 和
autoprefixer（自動添加首碼的外掛程式）
npm install --save-dev postcss-
loader autoprefixer

4.外掛程式（Plugins）:在webpack配置中的plugins關鍵字部
分添加該外掛程式的一個執行個體
//HtmlWebpackPlugin：npm install
--save-dev html-webpack-plugin

//Hot Module Replacement（HMR）也
是webpack裡很有用的一個外掛程式，它允許你在修改組件代
碼後，自動重新整理即時預覽修改後的效果。在webpack中實
現HMR也很簡單，只需要做兩項配置
在webpack設定檔中添加HMR外掛程式
；
在Webpack Dev Server中添加“hot
”參數；

//OccurenceOrderPlugin :為組件分
配ID，通過這個外掛程式webpack可以分析和優先考慮使用最
多的模組，並為它們分配最小的ID

//UglifyJsPlugin：壓縮JS代碼；

//ExtractTextPlugin：分離CSS和JS
檔案
npm install --save-dev extract-
text-webpack-plugin

//image-webpack-loader 對圖片就行
壓縮

webpack知識總結