webpack4.x打包過(guò)程詳解
一、全局安裝 webpack-cli 腳手架
npm install webpack-cli -g
二、新建一個(gè)項(xiàng)目wp，并在wp目錄下初始化一個(gè)package.json文件。
npm init -y
在wp目錄下新建一個(gè)src目錄，并在該目錄下新建一個(gè)index.js 作為入口文件
webpack4.x 給我們提供了兩種打包模式：
development 為開發(fā)模式
production 為生產(chǎn)模式，打包出的 main.js 代碼自動(dòng)壓縮
我們可以直接使用命令 webpack --mode development 進(jìn)行開發(fā)模式打包
我們使用生產(chǎn)模式webpack --mode production 打包
此時(shí)代碼已經(jīng)被壓縮。
不管哪種模式，我們每次打包都使用 webpack --mode development 或者 webpack --mode production 都有點(diǎn)麻煩，我們可以修改下package.json文件里面的 scripts 屬性：
"dev": "webpack --mode development",
"build: "webpack --mode production"
最后我們就可以使用 npm run dev 進(jìn)行開發(fā)模式打包，使用 npm run build 進(jìn)行生產(chǎn)模式打包。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中兩種鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼
方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量，缺點(diǎn)是它占用了函數(shù)的返回值。2011-01-01
這篇文章主要介紹了JS作為值的函數(shù)用法,結(jié)合實(shí)例形式分析了javascript處理函數(shù)作為參數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2016-06-06
移動(dòng)端點(diǎn)擊態(tài)處理的三種實(shí)現(xiàn)方式
在移動(dòng)端開發(fā)的時(shí)候，常常需要加點(diǎn)擊態(tài)，就是當(dāng)用戶點(diǎn)擊某個(gè)URL時(shí)，給相應(yīng)的標(biāo)簽添加按下效果樣式。這篇文章給大家分享了三種實(shí)現(xiàn)方法，包括偽類:active、webkit-tap-highlight-color和touch事件，下面來(lái)一起看看詳細(xì)的介紹吧。2017-01-01
JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表
這篇文章主要為大家詳細(xì)介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)之雙向鏈表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法,涉及javascript鼠標(biāo)事件及頁(yè)面跳轉(zhuǎn)的相關(guān)技巧,簡(jiǎn)單實(shí)用,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
昨天是預(yù)熱班學(xué)習(xí)的最后一天，為了檢驗(yàn)我們是否能夠升入就業(yè)班學(xué)習(xí)，進(jìn)行了預(yù)熱班結(jié)課考試。2009-11-11
在JS中事件是JS與瀏覽器交互的主要途徑,本文主要介紹下最簡(jiǎn)單的自定義事件，不過(guò)還有很多缺陷，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)自定義事件有所幫助2013-02-02
JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹
這篇文章主要介紹了JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹，非常有參考價(jià)值，特此分享到腳本之家平臺(tái)供大家參考2016-05-05
15個(gè)簡(jiǎn)單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié))
這篇文章主要介紹了15個(gè)簡(jiǎn)單的JS編碼標(biāo)準(zhǔn)讓你的代碼更整潔(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11