webpack的安裝全過(guò)程
更新時(shí)間：2025年06月12日 10:02:02 作者：不想起名55
這篇文章主要介紹了webpack的安裝全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(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 分離出來(lái)了）
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"
},如果啟動(dòng)報(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 頁(yè)面入口文件
- show.js 主要展示webpack的方法
- main.js 執(zhí)行入口文件
- webpack.config.js 配置webpack文件
path要安裝
運(yùn)行npm start
---------------------成功-----------------------------
bundle.js文件是一個(gè)可執(zhí)行的js文件，包含依賴(lài)的兩個(gè)模塊main.js, show.js以及內(nèi)置的webpackBootstrap啟動(dòng)函數(shù)
網(wǎng)頁(yè)也顯示成功
三、流程
webpack是一個(gè)打包模塊化js的工具
- 會(huì)從main.js出發(fā)，識(shí)別出源碼中的模塊化導(dǎo)入語(yǔ)句，遞歸找出入口文件所有依賴(lài)
- 后將入口和其他依賴(lài)打包到一個(gè)單獨(dú)的文件中
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程
這篇文章主要介紹了vue+vue-meta-info動(dòng)態(tài)設(shè)置meta標(biāo)簽教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3使用transition組件改變DOM屬性的方式小結(jié)
這篇文章主要為大家詳細(xì)介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要為大家介紹了手寫(xiě)一個(gè)vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟)
這篇文章主要介紹了vue3.0 搭建項(xiàng)目總結(jié)(詳細(xì)步驟),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue中的slot封裝組件彈窗，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了在vue-cli3中使用axios獲取本地json操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了Vue Router history模式的配置方法及其原理,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue?+?electron應(yīng)用文件讀寫(xiě)操作
這篇文章主要介紹了vue?+?electron應(yīng)用文件讀寫(xiě)操作,如果要制作的應(yīng)用并不復(fù)雜，完全可以將數(shù)據(jù)存儲(chǔ)在本地文件當(dāng)中，然后應(yīng)用就可以通過(guò)這些文件進(jìn)行數(shù)據(jù)的讀寫(xiě)，需要的朋友參考下吧2022-06-06
基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟
在平時(shí)開(kāi)發(fā)的時(shí)候很多情況都會(huì)使用到表格和分頁(yè)功能,下面這篇文章主要給大家介紹了關(guān)于如何基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟,需要的朋友可以參考下2022-09-09