Webpack之plugin的使用
什么是plugin？
plugin是插件的意思，通常用于對現(xiàn)有的架構(gòu)進(jìn)行擴(kuò)展。webpack中的插件，就是對webpack現(xiàn)有功能的各種擴(kuò)展，比如打包優(yōu)化，文件壓縮等等。
loader和plugin的區(qū)別： loader主要用于轉(zhuǎn)換某些類型的模塊，是一個(gè)加載器；plugin是插件，對webpack本身進(jìn)行擴(kuò)展，是一個(gè)擴(kuò)展器；plugin的使用步驟： 通過npm 安裝需要使用的plugins（有些內(nèi)置的不需要再安裝）；在webpack.config.js中的plugins中配置插件；webpack中常用的一些插件：
1.添加版權(quán)的plugin: BannerPlugin
webpack自帶的插件，無需安裝，只需對webpack.config.js文件進(jìn)行配置即可：
打包運(yùn)行：npm run build
打包后的bundles.js中會有出現(xiàn)以上版權(quán)所有信息。
2.打包html的plugin: html-webpack-plugin
該插件能夠自動生成一個(gè)index.html文件（可以指定模板來生成），還能夠?qū)⒋虬膉s文件，自動通過scripts標(biāo)簽插入到body中。
安裝插件：
npm install html-webpack-plugin@3.2.0 --save-dev
配置webpack.config.js文件
打包運(yùn)行：npm run build
3.js壓縮的plugin ：uglifyjs-webpack-plugin
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
配置webpack.config.js文件
打包運(yùn)行：npm run build，即可實(shí)現(xiàn)js文件的打包。
可見打包的js文件已經(jīng)被盡可能的壓縮了！
到此這篇關(guān)于Webpack之plugin的使用的文章就介紹到這了,更多相關(guān)Webpack plugin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié)
這篇文章主要介紹了JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點(diǎn)小結(jié),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
javascript檢查瀏覽器是否支持flash的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript檢查瀏覽器是否支持flash的實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-08-08
javascript 樹形導(dǎo)航菜單實(shí)例代碼
本文章來給大家提供一款適用于網(wǎng)站后臺的使用的javascript 樹形導(dǎo)航菜單特效代碼，有需要了解的同學(xué)可以參考一下2013-08-08
編寫兼容IE和FireFox的腳本確定的件很煩人的事，今日又經(jīng)歷了一次。2009-05-05![Bootstrap 中data-[*] 屬性的整理](http://img.jbzj.com/images/xgimg/bcimg4.png)
本文給大家收藏整理了關(guān)于Bootstrap 中data-[*] 屬性的相關(guān)知識，感興趣的朋友一起看看吧2018-03-03
這篇文章介紹了gojs實(shí)現(xiàn)螞蟻線動畫效果的方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
利用Plupload.js解決大文件上傳問題, 帶進(jìn)度條和背景遮罩層
本篇文章主要介紹了c#+Plupload.js解決大容量文件上傳問題, 帶進(jìn)度條和背景遮罩層，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
本來是很簡單的一個(gè)功能，可是一開始弄的時(shí)候，還有IE能實(shí)現(xiàn)，F(xiàn)F總是不能實(shí)現(xiàn)，在網(wǎng)上看了半天，也沒弄出個(gè)所以然，所以在同事的幫忙下，總算弄出來了，瀏覽器的兼容性考的還是細(xì)節(jié)上面的東西，所有關(guān)于細(xì)節(jié)的，我會用注釋標(biāo)出來的。2015-05-05
基于JS實(shí)現(xiàn)bookstore靜態(tài)頁面的實(shí)例代碼
本文給大家分享一段核心代碼基于js實(shí)現(xiàn)的bookstore靜態(tài)頁面，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02