webpack該如何打包(打包流程)
更新時(shí)間：2023年12月09日 09:43:37 作者：W晚睡W
這篇文章主要介紹了webpack該如何打包及打包流程,本文通過圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
1.我們先創(chuàng)建一個(gè)空的大文件夾
2.打開該文件夾的終端 輸入npm init -y
2.1.打開該文件夾的終端
2.2在該終端運(yùn)行 npm init -y
3.安裝webpack
3.1打開webpack網(wǎng)址 點(diǎn)擊“中文文檔”
3.2點(diǎn)擊“指南”在點(diǎn)擊“起步”
3.3復(fù)制基本安裝圖片畫線的代碼
4.在一開始的文件夾下在創(chuàng)建一個(gè)名為src的文件夾
5.然后再在src內(nèi)創(chuàng)建一個(gè)名為index.js的文件
6.打開名為packge.json的文件修改名叫scripts內(nèi)屬性名后的所有內(nèi)容，修改為webpack
7. 然后在終端內(nèi)執(zhí)行npm run scripts內(nèi)的屬性名(該屬性名可以修改)
8.如果修改了src內(nèi) index.js的名字就不會打包成功
9.如果想打包成功那就需要在一開始的文件夾下創(chuàng)建一個(gè)名為webpack.config.js文件（簡化打包命令）
10.在文件內(nèi)書寫以下內(nèi)容
//導(dǎo)出一個(gè)配置對象
//path是nodejs內(nèi)置模塊 幫助處理路徑、
const path = require('path')
module.exports = {
//入口 ————dirname當(dāng)前模塊的絕對路徑
entry:path.resolve(__dirname,'src/index.js'),//此的地址為src內(nèi)自己定義的文件名
//出口
output:{
//目錄
path:path.resolve(__dirname, 'dist'),
//文件名
filename:'index.js',//此地址為src內(nèi)自己定義的文件
//清空dist 輸出最新的內(nèi)容
clean:true,
},
}11.在一次執(zhí)行 npm run scripts內(nèi)的屬性名(該屬性名可修改)
到此這篇關(guān)于webpack該如何打包的文章就介紹到這了,更多相關(guān)webpack打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用js異或算法實(shí)現(xiàn)腳本加解密的代碼2008-02-02
HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡單的實(shí)時(shí)聊天
WebSocket 是一種自然的全雙工、雙向、單套接字連接。這篇文章給大家介紹了HTML5基于Tomcat 7.0實(shí)現(xiàn)WebSocket連接并實(shí)現(xiàn)簡單的實(shí)時(shí)聊天，感興趣的朋友一起學(xué)習(xí)吧2016-10-10
這篇文章主要介紹了JavaScript更改原始對象valueOf的方法,涉及javascript使用自定義valueOf函數(shù)替換掉原始o(jì)bject中valueOf的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JS寫滑稽笑臉運(yùn)動(dòng)效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
JavaScript缺少塊級作用域，沒有private修飾符，但它具有函數(shù)作用域。作用域的好處是內(nèi)部函數(shù)可以訪問它們的外部函數(shù)的參數(shù)和變量（除了this和argument2011-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript的setter與getter方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
跨域（Cross-Origin）是指在瀏覽器中,當(dāng)前網(wǎng)頁的協(xié)議、域名或端口與請求目標(biāo)的協(xié)議、域名或端口不相同,即存在跨域請求的情況,這篇文章主要介紹了uniapp中安裝axios并解決跨域問題小結(jié),需要的朋友可以參考下2024-05-05
在JavaScript中監(jiān)聽鼠標(biāo)滾動(dòng)事件的兩種方法及優(yōu)化技巧
在網(wǎng)頁制作中,監(jiān)聽鼠標(biāo)滾動(dòng)通常有兩種含義：一是監(jiān)聽頁面或元素的滾動(dòng)（scroll?事件）,二是監(jiān)聽鼠標(biāo)滾輪的具體操作（wheel?事件）,下面分別介紹這兩種方法以及常見的優(yōu)化技巧,需要的朋友可以參考下2026-03-03
一直以來，對于JavaScript 中的this的理解都是很模糊的， 特別是對函數(shù)進(jìn)行apply 與 call 調(diào)用。這兩個(gè)操作如果沒有很好的理解 JavaScript中this的概念，會越搞越迷糊。2009-07-07
JS如何設(shè)置滾動(dòng)屬性默認(rèn)自動(dòng)滾動(dòng)到底部(overflow:scroll;)
這篇文章主要給大家介紹了關(guān)于JS如何設(shè)置滾動(dòng)屬性默認(rèn)自動(dòng)滾動(dòng)到底部(overflow:scroll;)的相關(guān)資料,通過本文介紹的的JavaScript代碼示例,你可以實(shí)現(xiàn)滾動(dòng)條默認(rèn)在最底部的效果,需要的朋友可以參考下2023-10-10