webpack創(chuàng)建項目并打包的詳細流程記錄
webpack基礎(chǔ)設(shè)置
1、新建項目
2、在項目中創(chuàng)建兩個文件夾 src 和 dist，其中src文件夾用于存放開發(fā)時寫的js、css等文件，dist文件夾中存放打包后生成的bundle.js文件。
3、確保項目本身安裝了node
通過在terminal中輸入node -v，查看是否有node的版本號
4、確保項目安裝了webpack
通過在terminal中輸入webpack -v，查看是否有webpack的版本號
5、可以在terminal中輸入：
webpack ./src/main.js ./dist/bundle.js
來將src文件夾下的以main.js作為入口文件的全部文件打包到dist文件夾中的bundle.js中
由于每次都這么寫太麻煩，可以配置簡單命令來實現(xiàn)。
6、創(chuàng)建webpack.config.js文件
并在文件中寫入如下代碼：
//去node中找一個叫'path'的包
const path = require('path')
//動態(tài)獲取絕對路徑需要用到node語法
module.exports = {
entry: './src/main.js',//這是入口路徑
output: { //output出口需要寫成一個類的形式
path: path.resolve(__dirname, 'dist'),//這是動態(tài)的獲取的絕對路徑
filename: 'bundle.js'
},
}用到node就需要npm，在terminal中輸入 npm init , 會自動生成package.json，在package.json中添加
即可在terminal中通過輸入 npm run build 對代碼進行打包。
關(guān)于loader
webpack會自動處理js之間相關(guān)的依賴,但是在開發(fā)中不僅僅有基本的js代碼處理，也需要加載css、圖片，將ES6轉(zhuǎn)成ES5代碼，將TypeScript轉(zhuǎn)換成ES5代碼，將scss、less轉(zhuǎn)成css，將.jsx、.vue文件轉(zhuǎn)成js文件等。webpack本身不支持上述操作。需要加載loader。
loaders | webpack 中文網(wǎng) (webpackjs.com)
可以查看webpack的所有l(wèi)oader。
添加對loader的依賴一般都是在terminal中npm install，然后在webpack.config.js文件中添加對其的配置。
關(guān)于npm install 包的普遍報錯的解決方法：
在包后面加上 --legacy-peer-deps
例如：
與壓縮文件相關(guān)的學習
UglifyjsWebpackPlugin插件
使用：
terminal中輸入：
npm install --save-dev uglifyjs-webpack-plugin@1.1.1 --legacy-peer-deps
webpack.config.js文件中：
const HtmlWebpackPlugin = require('html-webpack-plugin')以及在plugins中：
new UglifyjsWebpackPlugin()
這樣可以將bundle.js壓縮為一行代碼。
總結(jié)
到此這篇關(guān)于webpack創(chuàng)建項目并打包的文章就介紹到這了,更多相關(guān)webpack創(chuàng)建項目并打包內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
nrm(npm registry manager )是npm的鏡像源管理工具,它可以快速在讓你在本地源之間切換,下面這篇文章主要給大家介紹了關(guān)于npm與nrm兩種方式查看源和切換鏡像的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于axios和session的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看詳細的介紹吧。2017-07-07
Node.js接入DeepSeek實現(xiàn)流式對話功能
隨著人工智能技術(shù)的發(fā)展,越來越多的服務(wù)和應(yīng)用開始集成AI能力以提升用戶體驗,本文將介紹如何通過Node.js接入DeepSeek提供的API服務(wù),特別是其聊天完成（Chat?Completions）功能,為您的應(yīng)用增添智能對話能力,需要的朋友可以參考下2025-02-02
依賴管理是其中一個至關(guān)重要的環(huán)節(jié),本文主要介紹了更新npm項目依賴的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
本篇文章主要介紹了淺談express 中間件機制及實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
node的process以及child_process模塊學習筆記
這篇文章主要介紹了node的process以及child_process模塊學習筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
nodejs實現(xiàn)一個自定義的require方法的詳細流程
大家對nodejs中的require方法應(yīng)該不會陌生,這個方法可以用來導(dǎo)入nodejs的內(nèi)置模塊,自定義模塊,第三方模塊等,使用頻率非常高,那么這個方法內(nèi)部是如何實現(xiàn)的呢?本篇文章就是從頭到尾拆分實現(xiàn)流程,最終實現(xiàn)一個自定義的require方法,需要的朋友可以參考下2025-03-03
Puppeteer是一個Node庫，本文主要介紹了Node爬蟲工具Puppeteer入門教程實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
pnpm workspace管理monorepo項目使用過程詳解
這篇文章主要為大家介紹了pnpm workspace管理monorepo項目使用過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了node.js實現(xiàn)簡單的壓縮/解壓縮功能,結(jié)合實例形式分析了node.js實現(xiàn)本地文件與服務(wù)器端壓縮/解壓縮相關(guān)操作技巧,需要的朋友可以參考下2019-11-11