webpack4.x打包過程詳解
更新時間：2018年07月18日 09:13:30 作者：youzhiningo
這篇文章主要介紹了webpack4.x打包過程詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、全局安裝 webpack-cli 腳手架
npm install webpack-cli -g
二、新建一個項目wp，并在wp目錄下初始化一個package.json文件。
npm init -y
在wp目錄下新建一個src目錄，并在該目錄下新建一個index.js 作為入口文件
webpack4.x 給我們提供了兩種打包模式：
development 為開發(fā)模式
production 為生產(chǎn)模式，打包出的 main.js 代碼自動壓縮
我們可以直接使用命令 webpack --mode development 進(jìn)行開發(fā)模式打包
我們使用生產(chǎn)模式webpack --mode production 打包
此時代碼已經(jīng)被壓縮。
不管哪種模式，我們每次打包都使用 webpack --mode development 或者 webpack --mode production 都有點麻煩，我們可以修改下package.json文件里面的 scripts 屬性：
"dev": "webpack --mode development",
"build: "webpack --mode production"
最后我們就可以使用 npm run dev 進(jìn)行開發(fā)模式打包，使用 npm run build 進(jìn)行生產(chǎn)模式打包。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS給按鈕添加跳轉(zhuǎn)功能類似a標(biāo)簽,需要的朋友可以參考下2017-05-05
javascript組合使用構(gòu)造函數(shù)模式和原型模式實例
這篇文章主要介紹了javascript組合使用構(gòu)造函數(shù)模式和原型模式的方法,通過一個簡單實例分析了javascript構(gòu)造函數(shù)模式與原型模式的使用方法,需要的朋友可以參考下2015-06-06
parseFloat()方法可以解析一個字符串，并返回一個浮點數(shù)。本文給大家分享javascript parsefloat()方法的相關(guān)知識，對javascript parsefloat相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了JS ES6中的解構(gòu)，對解構(gòu)感興趣的同學(xué)，可以參考下2021-04-04
基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動
這篇文章主要介紹了基于JS實現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動條滾動,代碼簡單易懂非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
在uni-app官網(wǎng)上發(fā)現(xiàn)uni-app不支持H5掃碼功能,但是下面的提示說明可以通過微信的JS-SDK實現(xiàn)掃碼功能,下面這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)微信H5掃碼功能的完整步驟,需要的朋友可以參考下2022-11-11
隔行換色非表格版不過原理可以參考下面的代碼，寫的很不錯2008-05-05
這篇文章主要介紹了JavaScript設(shè)計模式之代理模式,簡單描述了代理模式的概念、原理并結(jié)合實例形式分析了javascript代理模式的相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2019-01-01
js鼠標(biāo)點擊圖片實現(xiàn)隨機(jī)變換圖片的方法
這篇文章主要介紹了js鼠標(biāo)點擊圖片實現(xiàn)隨機(jī)變換圖片的方法,涉及鼠標(biāo)事件與隨機(jī)函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
本文主要分享了原生JS實現(xiàn)跑馬燈效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02