webpack的安裝全過程

更新時(shí)間：2025年06月12日 10:02:02 作者：不想起名55

這篇文章主要介紹了webpack的安裝全過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、安裝webpack

新建目錄，執(zhí)行npm init

1.1安裝webpack到本項(xiàng)目（推薦）

npm i -D webpack                      //安裝最新版webpack  在devDependencies下
npm install webpack-cli --save-dev   //cli的安裝（如果webpack4+版本都需要安裝cli，因?yàn)閣ebpack 4將 cli 分離出來了）

1.2.1運(yùn)行

start中要找到自己配置的webpack路徑

  "scripts": {
    "start": "webpack ./webpack.config.js",  //優(yōu)先使用本項(xiàng)目下的webpack
    "test": "echo \"Error: no test specified\" && exit 1"
  },

如果啟動報(bào)錯(cuò)，顯示webpack既不是內(nèi)部命令，也不是運(yùn)行命令，需要配置電腦環(huán)境變量，具體參考網(wǎng)上其他博客。

1.2安裝webpack到全局

npm i -g webpack

二、使用webpack

現(xiàn)在使用webpack 輸出hello，webpack

2.1 新建文件

index.html 頁面入口文件

show.js 主要展示webpack的方法

main.js 執(zhí)行入口文件

webpack.config.js 配置webpack文件

path要安裝

運(yùn)行npm start

---------------------成功-----------------------------

bundle.js文件是一個(gè)可執(zhí)行的js文件，包含依賴的兩個(gè)模塊main.js, show.js以及內(nèi)置的webpackBootstrap啟動函數(shù)

網(wǎng)頁也顯示成功

三、流程

webpack是一個(gè)打包模塊化js的工具

會從main.js出發(fā)，識別出源碼中的模塊化導(dǎo)入語句，遞歸找出入口文件所有依賴
后將入口和其他依賴打包到一個(gè)單獨(dú)的文件中

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3中watch無法監(jiān)聽的解決辦法
本文主要介紹了Vue3中watch無法監(jiān)聽的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue中對比scoped css和css module的區(qū)別
這篇文章主要介紹了Vue中scoped css和css module的區(qū)別對比，scoped css可以直接在能跑起來的vue項(xiàng)目中使用而css module需要增加css-loader配置才能生效。具體內(nèi)容詳情大家參考下本文
2018-05-05
Vue精美簡潔登錄頁完整代碼實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue精美簡潔登錄頁完整代碼的相關(guān)資料,通過文中的方法大家可以使用實(shí)現(xiàn)簡單的用戶登錄界面,下面通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07
Nuxt的路由配置和參數(shù)傳遞方式
這篇文章主要介紹了Nuxt的路由配置和參數(shù)傳遞方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue項(xiàng)目如何引入json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目如何引入json數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue項(xiàng)目中如何運(yùn)用vuex的實(shí)戰(zhàn)記錄
如果說是JQuery是手工作坊,那么Vue.js就像是一座工廠,雖然Vue.js做的任何事情JQuery都可以做,但無論是代碼量還是流程規(guī)范性都是前者較優(yōu),下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何運(yùn)用vuex的相關(guān)資料,需要的朋友可以參考下
2021-09-09
elementui[el-table]toggleRowSelection默認(rèn)多選事件無法選中問題
這篇文章主要介紹了elementui[el-table]toggleRowSelection默認(rèn)多選事件無法選中問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式
本文通過示例代碼介紹了vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式,通過場景分析介紹了vue3使用組合式api將時(shí)間戳格式轉(zhuǎn)換成時(shí)間格式（2023年09月28日 10:00）,感興趣的朋友一起看看吧
2023-12-12
vue實(shí)現(xiàn)微信分享鏈接添加動態(tài)參數(shù)的方法
這篇文章主要介紹了vue微信分享鏈接添加動態(tài)參數(shù)的實(shí)現(xiàn)方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04