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的路徑要填寫(xiě)正確)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),所以需要訪(fǎng)問(wèn)服務(wù)器
直接訪(fǎng)問(wèn)即可,成功實(shí)現(xiàn)WebPack自動(dòng)打包
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了使用VS開(kāi)發(fā) Node.js的方法，主要是使用NTVS（Node.js Toolsfor Visual Studio）來(lái)實(shí)現(xiàn)，有需要的小伙伴參考下2015-01-01
node封裝一個(gè)控制臺(tái)進(jìn)度條插件???????詳情
這篇文章主要介紹了node封裝一個(gè)控制臺(tái)進(jìn)度條插件???????詳情,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
node.js回調(diào)函數(shù)之阻塞調(diào)用與非阻塞調(diào)用
本文重點(diǎn)給大家介紹node.js回調(diào)函數(shù)之阻塞調(diào)用和非阻塞調(diào)用，涉及到node.js回調(diào)函數(shù)的相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-11-11
Node.js能夠在眾多的后端JavaScript技術(shù)之中脫穎而出，正是因其基于事件的特點(diǎn)而受到歡迎，所以這篇文章小編給大家詳細(xì)介紹了Node.js中的事件機(jī)制，本文介紹的很詳細(xì)，對(duì)大家的理解和學(xué)習(xí)很有幫助，下面來(lái)一起看看吧。2016-09-09
NodeJs版本過(guò)高無(wú)法啟動(dòng)Vue項(xiàng)目報(bào)錯(cuò)的幾種解決方法
在開(kāi)發(fā)vue項(xiàng)目時(shí),我們通常使用nodejs作為項(xiàng)目的運(yùn)行環(huán)境,但是有時(shí)候,由于nodejs版本過(guò)高,可能會(huì)導(dǎo)致vue項(xiàng)目啟動(dòng)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于NodeJs版本過(guò)高無(wú)法啟動(dòng)Vue項(xiàng)目報(bào)錯(cuò)的幾種解決方法,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了ESM與CJS互相轉(zhuǎn)換的理解與實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
前端自動(dòng)化開(kāi)發(fā)之Node.js的環(huán)境搭建教程
這篇文章主要介紹了前端自動(dòng)化開(kāi)發(fā)之Node.js環(huán)境搭建的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用node.js具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-04-04
這篇文章主要介紹了node實(shí)現(xiàn)分片下載的示例代碼，使用場(chǎng)景包括基于瀏覽器的流文件片段傳輸、基于客戶(hù)端的分片下載等。感興趣的小伙伴們可以參考一下2018-10-10
本文給大家介紹分享node全面解析表單的圖片上傳，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11
nodejs中art-template模板語(yǔ)法的引入及沖突解決方案
本篇文章主要介紹了nodejs中art-template模板語(yǔ)法的引入及沖突解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11