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