這篇文章將為大家詳細(xì)講解有關(guān)webpack4.x如何打包，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，包括成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，創(chuàng)新互聯(lián)核心團(tuán)隊(duì)十年專注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。

一、全局安裝 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 為開(kāi)發(fā)模式
production 為生產(chǎn)模式，打包出的 main.js 代碼自動(dòng)壓縮

我們可以直接使用命令 webpack --mode development 進(jìn)行開(kāi)發(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)行開(kāi)發(fā)模式打包，使用 npm run build 進(jìn)行生產(chǎn)模式打包。

關(guān)于“webpack4.x如何打包”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。