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