使用webpack搭建個性化專案

2021-10-03 15:28:15 字數 2001 閱讀 5746

安裝主包

yarn add webpack webpack-cli webpack-dev-server -d
根據專案實際需求安裝loaders,webpack-loaders列表

根據專案實際需求安裝外掛程式, webpack-plugins列表 包名

說明webpack

webpack主程式,配置列表

webpack-cli

webpack命令,webpack4.0以上必需

webpack-dev-server

webpack開發模組,常用配置

style-loader

將css內容轉換成js字串,生成style節點

css-loader

將css檔案轉換成commonjs模組,在js檔案中可以使用import等方式引入css

sass-loader

將sass/scss編譯成css,需要安裝包node-sass或sass,常用配置

clean-webpack-plugin

刪除構建檔案,常用配置

html-webpack-plugin

html打包外掛程式,常用配置

html-webpack-inline-source-plugin

將js、css等**內聯到html中,依賴html-webpack-plugin,常用配置

friendly-errors-webpack-plugin

開發環境下,友好的錯誤提示外掛程式,可自定義編譯完成後的顯示

progress-bar-webpack-plugin

開發環境下,編譯進度條,可自定義進度條樣式和顯示文字

open-browser-webpack-plugin

開發環境下,編譯完成後自動開啟瀏覽器

module.exports =

// 靜態檔案根目錄,可以使用陣列提供多個目錄,推薦使用絕對路徑

contentbase: path.

resolve

('public'),

// 啟動服務後是否開啟瀏覽器,推薦使用cli方式 `--open`,可自由控制

open:

true

,// 是否啟用gzip壓縮

compress:

true

,// 啟用 webpack 的模組熱替換特性

hot:

true

,// **請求,通常用來**api請求

proxy:}}

}...

}

module.exports =

,// 將 js 字串生成為 style 節點

,// 將 css 轉化成 commonjs 模組

// 將 sass 編譯成 css]}

]}...}

const

=require

('clean-webpack-plugin'

)module.exports =

const htmlwebpackplugin =

require

('html-webpack-plugin'

)module.exports =)]

...}

const htmlwebpackplugin =

require

('html-webpack-plugin'

)const htmlwebpackinlinesourceplugin =

require

('html-webpack-inline-source-plugin'

)module.exports =),

newhtmlwebpackinlinesourceplugin()

// 外掛程式必需寫在 htmlwebpackplugin 後面

]...

}

使用wpa supplicant進行個性化操作

螢幕右上角的無線標誌,是系統呼叫wpa supplicant後進行ui顯示的 其控制模組為network manager gnome 因此如果希望手動使用wpa supplicant 需要進行的操作是 1關閉network manager服務 sudo service network manager...

部落格個性化

頁面定製css header 將預設的導航頭遮蔽掉,這樣才能把自己的導航欄加上去 定製自己導航欄的樣式 shwtop ul shwtop li shwtop li a,dropbtn 滑鼠移上去,改變背景顏色 shwtop li a hover,dropdown hover dropbtn shwt...

個性化推薦技術

如果說過去的十年是搜尋技術大行其道的十年,那麼個性化推薦技術將成為未來十年中最重要的革新之一。目前幾乎所有大型的電子商務系統,如amazon cdnow netflix等,都不同程度地使用了各種形式的推薦系統。而近來以 發現 為核心的 正開始在網際網路上嶄露頭角,比如側重於 推薦的八寶盒,側重於圖書...