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