webpack4.x如何打包

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

一、全局安裝 webpack-cli 腳手架

npm install webpack-cli -g

二、新建一個(gè)項目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)模式打包。