NodeJs使用webpack打包項目的方法詳解
更新時間：2022年02月28日 15:06:51 作者：碰磕
這篇文章主要為大家詳細介紹了NodeJs使用webpack打包項目的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
Webpack
為何要用::友好支持模塊化、代碼混淆、處理js兼容、性能優(yōu)化等…
WebPack的使用
第一步:初始化項目:npm init -y
第二步:新建 src/index.html
第三步:安裝模塊Jquery npm install jquery
第四步:測試隔行換色
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隔行換色</title>
<script src="./index.js"></script>
</head>
<body>
<h1>web pack測試</h1>
<!-- vscode快捷方式:ul>li{第$個li}*10 -->
<ul>
<li>第1個li</li>
<li>第2個li</li>
<li>第3個li</li>
<li>第4個li</li>
<li>第5個li</li>
<li>第6個li</li>
<li>第7個li</li>
<li>第8個li</li>
<li>第9個li</li>
<li>第10個li</li>
</ul>
</body>
</html>
index.js
import $ from 'jquery'
$(function(){
$('li:odd').css('backgroundColor','green');//odd偶數(shù)
$('li:even').css('backgroundColor','pink');//even奇數(shù)
})
運行報錯:
這就是兼容性問題
使用webpack打包解決問題官網(wǎng)：https://www.webpackjs.com/
第五步:安裝webpack(兩個包)npm install webpack webpack-cli -D (開發(fā)模式)
第六步:新建webpack.config.js
/**
* webpack 配置文件
*/
module.exports={
//調(diào)試時使用development開發(fā)模式
//打包時使用production生產(chǎn)模式
mode : 'development'
}
配置文件部分屬性:
- 默認打包入口:/src/index.js
- 默認打包出口:/dist/main.js
可進行配置:
/**
* webpack 配置文件
*/
const path=require('path');
module.exports={
//調(diào)試時使用development開發(fā)模式
//打包時使用production生產(chǎn)模式
mode : 'development',
entry: path.join(__dirname,'./src/index.js'), //__dirname表示當(dāng)前目錄當(dāng)前路徑
output: {
path: path.join(__dirname,'./dist'),
filename:'bundle.js',
},//出口
}
第七步:修改package.json(可有可無,運行方式不同)
package.json
"scripts": {
"dev": "webpack"
},
第八步:執(zhí)行打包npm run dev
目錄下多出文件夾dist,終端含有’successfully’表示打包成功!
測試
首先修改index.html引入的js包
<!--<script src="./index.js"></script>-->? <script src="../dist/main.js"></script>
運行:
表明webpack打包成功有效并且解決了兼容性問題!!!
WebPack打包CSS
傳統(tǒng)都是用link引用
第一步:安裝處理css的loader:npm i style-loader css-loader -D
根據(jù)實際需要安裝對應(yīng)的加載器
npm install less-loader -D (less加載器)
npm install sass-loader node-sass -D (sass加載器)
第二步:修改webpack.config.js:
/**
* webpack 配置文件
*/
const path=require('path');
module.exports={
//調(diào)試時使用development開發(fā)模式
//打包時使用production生產(chǎn)模式
mode : 'development',
entry: path.join(__dirname,'./src/index.js'), //__dirname表示當(dāng)前目錄當(dāng)前路徑
output: {
path: path.join(__dirname,'./dist'),
filename:'bundle.js',
},//出口
devServer:{
static: './src'
},
//新增內(nèi)容css
module:{ //處理css
rules:[ //(規(guī)范)約束
{test:/\.css$/,use:['style-loader','css-loader']}//正則表達式拓展名.css
]
}
}
第三步:引入CSS文件:`
css
#box{
width: 200px;
height: 100px;
background-color: greenyellow;
}
index.js中加在上方(css的路徑要填寫正確)import './css/style.css'
index.html
<h1>CSS</h1>
<div id="box">盒子</div>
第四步:運行測試:npm run dev
成功!!!
WebPack自動打包
由于每次更新代碼都需要手動打包,這時我們要用上自動打包
①安裝 npm install webpack-dev-server -D
②修改package.json(使得窗口自動打開并且自動打包)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9090"
},
③修改webpack.config.js
devServer:{
static: './src'
}
④html引入bundle.js
打包后的文件都在根目錄下
<script src="/bundle.js"></script>
④運行驗證npm run dev原理:服務(wù)器上運行監(jiān)聽,所以需要訪問服務(wù)器
直接訪問即可,成功實現(xiàn)WebPack自動打包
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于nodejs的錯誤處理過程的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了nodejs實現(xiàn)UDP組播示例方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了詳解在Node.js中發(fā)起HTTP請求的5種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Stream 是一個抽象接口，Node 中有很多對象實現(xiàn)了這個接口。例如，對http 服務(wù)器發(fā)起請求的request 對象就是一個 Stream，還有stdout（標(biāo)準(zhǔn)輸出）。2016-08-08
基于promise.js實現(xiàn)nodejs的promises庫
promise是JavaScript實現(xiàn)優(yōu)雅編程的一個非常不錯的輕量級框架。該框架可以讓你從雜亂的多重異步回調(diào)代碼中解脫出來，并把精力集中到你的業(yè)務(wù)邏輯上。2014-07-07
這篇文章主要介紹了node.js?實現(xiàn)手機號驗證碼登錄功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
快速刪除 node_modules 目錄的集中方法(多種方法)
本文介紹了三種快速刪除node_modules目錄的方法：使用rimraf工具、通過npx運行rimraf以及在Windows命令提示符中使用del命令,每種方法都適合不同的操作系統(tǒng)和使用場景2024-11-11
NodeJS如何優(yōu)雅的實現(xiàn)Sleep休眠
這篇文章主要介紹了NodeJS如何優(yōu)雅的實現(xiàn)Sleep休眠問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
express框架實現(xiàn)基于Websocket建立的簡易聊天室
本篇文章主要介紹了express框架實現(xiàn)基于Websocket建立的簡易聊天室，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了nodejs模塊學(xué)習(xí)之connect解析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07