欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Webpack之plugin的使用

 更新時(shí)間：2023年02月03日 09:13:20   作者：不情不愿  
本文主要介紹了Webpack之plugin的使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

什么是plugin？

plugin是插件的意思，通常用于對(duì)現(xiàn)有的架構(gòu)進(jìn)行擴(kuò)展。webpack中的插件，就是對(duì)webpack現(xiàn)有功能的各種擴(kuò)展，比如打包優(yōu)化，文件壓縮等等。

loader和plugin的區(qū)別： loader主要用于轉(zhuǎn)換某些類型的模塊，是一個(gè)加載器；plugin是插件，對(duì)webpack本身進(jìn)行擴(kuò)展，是一個(gè)擴(kuò)展器；plugin的使用步驟： 通過(guò)npm 安裝需要使用的plugins（有些內(nèi)置的不需要再安裝）；在webpack.config.js中的plugins中配置插件；webpack中常用的一些插件：

1.添加版權(quán)的plugin: BannerPlugin

webpack自帶的插件，無(wú)需安裝，只需對(duì)webpack.config.js文件進(jìn)行配置即可：

打包運(yùn)行：npm run build

打包后的bundles.js中會(huì)有出現(xiàn)以上版權(quán)所有信息。

2.打包html的plugin:   html-webpack-plugin

該插件能夠自動(dòng)生成一個(gè)index.html文件（可以指定模板來(lái)生成），還能夠?qū)⒋虬膉s文件，自動(dòng)通過(guò)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文件的打包。

 可見(jiàn)打包的js文件已經(jīng)被盡可能的壓縮了！

到此這篇關(guān)于Webpack之plugin的使用的文章就介紹到這了,更多相關(guān)Webpack plugin內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論