webpack該如何打包(打包流程)
更新時(shí)間：2023年12月09日 09:43:37 作者：W晚睡W
這篇文章主要介紹了webpack該如何打包及打包流程,本文通過(guò)圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
1.我們先創(chuàng)建一個(gè)空的大文件夾
2.打開(kāi)該文件夾的終端 輸入npm init -y
2.1.打開(kāi)該文件夾的終端
2.2在該終端運(yùn)行 npm init -y
3.安裝webpack
3.1打開(kāi)webpack網(wǎng)址 點(diǎn)擊“中文文檔”
3.2點(diǎn)擊“指南”在點(diǎn)擊“起步”
3.3復(fù)制基本安裝圖片畫(huà)線的代碼
4.在一開(kāi)始的文件夾下在創(chuàng)建一個(gè)名為src的文件夾
5.然后再在src內(nèi)創(chuàng)建一個(gè)名為index.js的文件
6.打開(kāi)名為packge.json的文件修改名叫scripts內(nèi)屬性名后的所有內(nèi)容，修改為webpack
7. 然后在終端內(nèi)執(zhí)行npm run scripts內(nèi)的屬性名(該屬性名可以修改)
8.如果修改了src內(nèi) index.js的名字就不會(huì)打包成功
9.如果想打包成功那就需要在一開(kāi)始的文件夾下創(chuàng)建一個(gè)名為webpack.config.js文件（簡(jiǎn)化打包命令）
10.在文件內(nèi)書(shū)寫(xiě)以下內(nèi)容
//導(dǎo)出一個(gè)配置對(duì)象
//path是nodejs內(nèi)置模塊 幫助處理路徑、
const path = require('path')
module.exports = {
//入口 ————dirname當(dāng)前模塊的絕對(duì)路徑
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
單擊復(fù)制文字的js找了很久，由于之前沒(méi)有接觸過(guò)，完全不知道兼容ie及標(biāo)準(zhǔn)dom瀏覽器，不僅僅要通過(guò)js，而且需要flash的幫忙，下面與大家分享下具體的實(shí)現(xiàn)方法2013-07-07
這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)一個(gè)小型編譯器，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定的參考價(jià)值，需要的可以參考一下2022-04-04
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一個(gè)國(guó)際化API,用于格式化相對(duì)時(shí)間,如"3天前"或"2年后",支持多種語(yǔ)言和配置選項(xiàng),適用于社交媒體時(shí)間戳和事件提醒等場(chǎng)景,它簡(jiǎn)化了國(guó)際化的相對(duì)時(shí)間顯示,使開(kāi)發(fā)者能夠根據(jù)用戶(hù)的語(yǔ)言和區(qū)域設(shè)置輕松實(shí)現(xiàn)時(shí)間格式化2024-09-09
這篇文章主要介紹了JavaScript?ECharts可視化圖表庫(kù)，ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表2023-01-01
TreeView 用法，后臺(tái)結(jié)合asp.net需要的朋友可以參考下。2011-07-07
本文是小編在平時(shí)項(xiàng)目中收集整理的javascript常用函數(shù)方法，特別是javascript方法經(jīng)常會(huì)用到，對(duì)javascript函數(shù)方法相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
本文主要分享了利用canvas畫(huà)多邊形的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript遍歷數(shù)組的方法代碼實(shí)例
這篇文章主要介紹了JavaScript遍歷數(shù)組的方法代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
本文給大家收藏整理了js數(shù)組去重的n種方法，大家可以根據(jù)自己需要選擇比較好的方法，感興趣的朋友一起看看吧2018-06-06
這篇文章主要介紹了JS查找數(shù)組中重復(fù)元素的方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript針對(duì)數(shù)組的遍歷、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06