webpack該如何打包(打包流程)
更新時間：2023年12月09日 09:43:37 作者：W晚睡W
這篇文章主要介紹了webpack該如何打包及打包流程,本文通過圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
1.我們先創(chuàng)建一個空的大文件夾
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)建一個名為src的文件夾
5.然后再在src內(nèi)創(chuàng)建一個名為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)建一個名為webpack.config.js文件（簡化打包命令）
10.在文件內(nèi)書寫以下內(nèi)容
//導(dǎo)出一個配置對象
//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)文章
單擊復(fù)制文字的js找了很久，由于之前沒有接觸過，完全不知道兼容ie及標(biāo)準(zhǔn)dom瀏覽器，不僅僅要通過js，而且需要flash的幫忙，下面與大家分享下具體的實(shí)現(xiàn)方法2013-07-07
這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)一個小型編譯器，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作有一定的參考價值，需要的可以參考一下2022-04-04
如何使用 Intl.RelativeTimeFormat 在 JavaScript&nbs
Intl.RelativeTimeFormat是JavaScript提供的一個國際化API,用于格式化相對時間,如"3天前"或"2年后",支持多種語言和配置選項(xiàng),適用于社交媒體時間戳和事件提醒等場景,它簡化了國際化的相對時間顯示,使開發(fā)者能夠根據(jù)用戶的語言和區(qū)域設(shè)置輕松實(shí)現(xiàn)時間格式化2024-09-09
這篇文章主要介紹了JavaScript?ECharts可視化圖表庫，ECharts是一款基于JavaScript的數(shù)據(jù)可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表2023-01-01
TreeView 用法，后臺結(jié)合asp.net需要的朋友可以參考下。2011-07-07
本文是小編在平時項(xiàng)目中收集整理的javascript常用函數(shù)方法，特別是javascript方法經(jīng)常會用到，對javascript函數(shù)方法相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
本文主要分享了利用canvas畫多邊形的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript遍歷數(shù)組的方法代碼實(shí)例
這篇文章主要介紹了JavaScript遍歷數(shù)組的方法代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
本文給大家收藏整理了js數(shù)組去重的n種方法，大家可以根據(jù)自己需要選擇比較好的方法，感興趣的朋友一起看看吧2018-06-06
這篇文章主要介紹了JS查找數(shù)組中重復(fù)元素的方法,結(jié)合具體實(shí)例形式對比分析了javascript針對數(shù)組的遍歷、判斷、排序等相關(guān)操作技巧,需要的朋友可以參考下2017-06-06