NodeJs使用webpack打包項(xiàng)目的方法詳解
Webpack
為何要用::友好支持模塊化、代碼混淆、處理js兼容、性能優(yōu)化等…
WebPack的使用
第一步:初始化項(xiàng)目:npm init -y
第二步:新建 src/index.html
第三步:安裝模塊Jquery npm install jquery
第四步:測(cè)試隔行換色
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測(cè)試</h1>
<!-- vscode快捷方式:ul>li{第$個(gè)li}*10 -->
<ul>
<li>第1個(gè)li</li>
<li>第2個(gè)li</li>
<li>第3個(gè)li</li>
<li>第4個(gè)li</li>
<li>第5個(gè)li</li>
<li>第6個(gè)li</li>
<li>第7個(gè)li</li>
<li>第8個(gè)li</li>
<li>第9個(gè)li</li>
<li>第10個(gè)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ù)
})
運(yùn)行報(bào)錯(cuò):
這就是兼容性問(wèn)題
使用webpack打包解決問(wèn)題官網(wǎng)：https://www.webpackjs.com/
第五步:安裝webpack(兩個(gè)包)npm install webpack webpack-cli -D (開(kāi)發(fā)模式)
第六步:新建webpack.config.js
/**
* webpack 配置文件
*/
module.exports={
//調(diào)試時(shí)使用development開(kāi)發(fā)模式
//打包時(shí)使用production生產(chǎn)模式
mode : 'development'
}
配置文件部分屬性:
- 默認(rèn)打包入口:/src/index.js
- 默認(rèn)打包出口:/dist/main.js
可進(jìn)行配置:
/**
* webpack 配置文件
*/
const path=require('path');
module.exports={
//調(diào)試時(shí)使用development開(kāi)發(fā)模式
//打包時(shí)使用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(可有可無(wú),運(yùn)行方式不同)
package.json
"scripts": {
"dev": "webpack"
},
第八步:執(zhí)行打包npm run dev
目錄下多出文件夾dist,終端含有’successfully’表示打包成功!
測(cè)試
首先修改index.html引入的js包
<!--<script src="./index.js"></script>-->? <script src="../dist/main.js"></script>
運(yùn)行:
表明webpack打包成功有效并且解決了兼容性問(wèn)題!!!
WebPack打包CSS
傳統(tǒng)都是用link引用
第一步:安裝處理css的loader:npm i style-loader css-loader -D
根據(jù)實(shí)際需要安裝對(duì)應(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)試時(shí)使用development開(kāi)發(fā)模式
//打包時(shí)使用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']}//正則表達(dá)式拓展名.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>
第四步:運(yùn)行測(cè)試:npm run dev
成功!!!
WebPack自動(dòng)打包
由于每次更新代碼都需要手動(dòng)打包,這時(shí)我們要用上自動(dòng)打包
①安裝 npm install webpack-dev-server -D
②修改package.json(使得窗口自動(dòng)打開(kāi)并且自動(dòng)打包)
"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>
④運(yùn)行驗(yàn)證npm run dev原理:服務(wù)器上運(yùn)行監(jiān)聽(tīng),所以需要訪問(wèn)服務(wù)器
直接訪問(wèn)即可,成功實(shí)現(xiàn)WebPack自動(dòng)打包
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于nodejs的錯(cuò)誤處理過(guò)程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了nodejs實(shí)現(xiàn)UDP組播示例方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
詳解在Node.js中發(fā)起HTTP請(qǐng)求的5種方法
這篇文章主要介紹了詳解在Node.js中發(fā)起HTTP請(qǐng)求的5種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
Stream 是一個(gè)抽象接口，Node 中有很多對(duì)象實(shí)現(xiàn)了這個(gè)接口。例如，對(duì)http 服務(wù)器發(fā)起請(qǐng)求的request 對(duì)象就是一個(gè) Stream，還有stdout（標(biāo)準(zhǔn)輸出）。2016-08-08
基于promise.js實(shí)現(xiàn)nodejs的promises庫(kù)
promise是JavaScript實(shí)現(xiàn)優(yōu)雅編程的一個(gè)非常不錯(cuò)的輕量級(jí)框架。該框架可以讓你從雜亂的多重異步回調(diào)代碼中解脫出來(lái)，并把精力集中到你的業(yè)務(wù)邏輯上。2014-07-07
node.js?實(shí)現(xiàn)手機(jī)號(hào)驗(yàn)證碼登錄功能
這篇文章主要介紹了node.js?實(shí)現(xiàn)手機(jī)號(hào)驗(yàn)證碼登錄功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
快速刪除 node_modules 目錄的集中方法(多種方法)
本文介紹了三種快速刪除node_modules目錄的方法：使用rimraf工具、通過(guò)npx運(yùn)行rimraf以及在Windows命令提示符中使用del命令,每種方法都適合不同的操作系統(tǒng)和使用場(chǎng)景2024-11-11
NodeJS如何優(yōu)雅的實(shí)現(xiàn)Sleep休眠
這篇文章主要介紹了NodeJS如何優(yōu)雅的實(shí)現(xiàn)Sleep休眠問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室
本篇文章主要介紹了express框架實(shí)現(xiàn)基于Websocket建立的簡(jiǎn)易聊天室，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了nodejs模塊學(xué)習(xí)之connect解析,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07