柚子快報(bào)邀請碼778899分享：webpack node
柚子快報(bào)邀請碼778899分享：webpack node
node.js+webpack
一、fs模塊讀寫文件
const fs = require('fs') // 引入fs對象
fs.writeFile("./test.txt", "hello Node.js", err => { // 寫文件
if(err) console.log(err)
else console.log("寫入成功")
})
fs.readFile("./test.txt", (err,data) => { // 讀文件
if(err) console.log(err)
else console.log(data.toString())
})
二、path模塊和__dirname
/ path.join()合并路徑
// __dirname獲取文件路徑
const fs = require('fs')
const path = require('path')
console.log(__dirname)
fs.readFile(path.join(__dirname, "../test.txt"), (err, data) => { // 使用絕對路徑
if(err) console.log(err)
else console.log(data.toString())
})
三、http模塊創(chuàng)建Web服務(wù)
端口號用于標(biāo)記服務(wù)器里不同功能的服務(wù)程序
端口號范圍：0-65536之間的整數(shù)http協(xié)議默認(rèn)訪問80端口
// 示例：基于http模塊創(chuàng)建Web服務(wù)程序
const http = require('http') // 加載http模塊，創(chuàng)建Web服務(wù)對象
const server = http.createServer()
server.on('request', (req, res) => { // 監(jiān)聽request請求事件，設(shè)置響應(yīng)頭和響應(yīng)體
// 設(shè)置響應(yīng)頭：內(nèi)容類型、普通文本、中文編碼格式
res.setHeader('Content-Type','text/plain;charset=utf-8')
res.end("歡迎使用Node.js")
})
server.listen(3001, () => { // 配置端口號并啟動Web服務(wù)
console.log("Web服務(wù)啟動成功");
})
四、CommonJS模塊和ECMAScript模塊實(shí)現(xiàn)模塊化
CommonJS模塊
導(dǎo)出：module.exports = {}
導(dǎo)入：require(‘模塊名或路徑’)(導(dǎo)入node.js內(nèi)置模塊用模塊名，導(dǎo)入自定義模塊用路徑)
示例：
// util.js文件代碼
const baseURL = 'https://www.baidu.com';
const getSum = arr => arr.reduce((sum,item) => sum += item, 0);
module.exports = {
url : baseURL,
arrSum : getSum
};
// index.js文件代碼
const util = require('./util.js');
console.log(util.url);
console.log(util.arrSum([10,20,40]));
ECMAScript模塊默認(rèn)導(dǎo)出
由于node.js默認(rèn)支持CommonJS標(biāo)準(zhǔn)語法，因此使用ECMAScript時(shí)需要在運(yùn)行模塊所在文件夾新建package.json文件，并設(shè)置{“type”:“module”}
導(dǎo)出：export default = {}
導(dǎo)入：import 變量名 from ‘模塊名或路徑’ (導(dǎo)入node.js內(nèi)置模塊用模塊名，導(dǎo)入自定義模塊用路徑)
示例：
// util.js文件代碼
const baseURL = 'https://www.baidu.com';
const getSum = arr => arr.reduce((sum,item) => sum += item, 0);
export default {
url : baseURL,
arrSum : getSum
};
// index.js文件代碼
import ut from './util.js';
console.log(ut.url);
console.log(ut.arrSum([10,20,40]));
ECMAScript模塊命名導(dǎo)出
導(dǎo)出：export 修飾定義語句
導(dǎo)入：import {變量名1,變量名2} from ‘模塊名或路徑’ (導(dǎo)入node.js內(nèi)置模塊用模塊名，導(dǎo)入自定義模塊用路徑)
示例：
// util.js文件代碼
export const baseURL = 'https://www.baidu.com';
export const getSum = arr => arr.reduce((sum,item) => sum += item, 0);
// index.js文件代碼
import { baseURL,getSum } from "./util.js"; // 必須同名
console.log(baseURL);
console.log(getSum([10,20,40]));
按需加載，使用命名方式全部加載，使用默認(rèn)方式
五、包的概念
包：將模塊、代碼、其他資料聚合成一個(gè)文件夾
包分類：
項(xiàng)目包–>主要用于編寫項(xiàng)目和業(yè)務(wù)邏輯軟件包–>封裝工具和方法進(jìn)行使用
note：包的根目錄中，必須要有package.json文件(用于記錄清單信息)
{
"name": "06", // 軟件包名稱
"version": "1.0.0", // 軟件包當(dāng)前版本
"description": "", // 描述包的功能
"main": "index.js", // 軟件包的入口點(diǎn)
"author": "WXR", // 軟件包作者
"license": "ISC" // 軟件包許可證
}
5.1 npm軟件包管理
npm是Node.js標(biāo)準(zhǔn)的軟件包管理器。
使用步驟：
初始化清單文件 npm init -y (得到package.json文件)下載軟件包 npm i 軟件包名
5.2 npm安裝所有依賴
npm i // 安裝依賴
5.3 npm全局軟件包nodemon
軟件包區(qū)別：
本地軟件包：當(dāng)前項(xiàng)目內(nèi)使用，封裝屬性和方法，存在于node_modules全局軟件包：本機(jī)所有項(xiàng)目使用，封裝命令和工具，存在于系統(tǒng)設(shè)置的位置
nodemon作用：替代node命令，檢測代碼更改，自動重啟程序
安裝命令：npm i nodemon -g (-g代表安裝到全局環(huán)境)
六、Webpack
定義：webpack是一個(gè)用于現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包工具。
6.1 webpack使用步驟
新建并初始化項(xiàng)目，編寫業(yè)務(wù)源代碼下載webpack webpack-cli到當(dāng)前項(xiàng)目中(版本獨(dú)立)，并配置局部自定義命令
npm i webpack webpack-cli --save-dev命令用于下載模塊在package.json文件中的"scripts"對象內(nèi)添加自定義命令**“build”:“webpack”** 運(yùn)行打包命令npm run build，自動產(chǎn)生dist分發(fā)文件夾(里面為壓縮優(yōu)化后，可直接執(zhí)行的代碼
6.2 修改webpack入口和出口
步驟：
在項(xiàng)目根目錄新建webpack.config.js配置文件導(dǎo)出配置對象，配置入口、出口文件路徑
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src/login/index.js'), // 入口
output: {
path: path.resolve(__dirname, 'dist/login'), // 出口
filename: 'index.js',
clean : true // 清空出口文件內(nèi)的內(nèi)容
},
};
然后運(yùn)行打包命令npm run build，重新打包
6.3 自動生成html文件
步驟：
將模板文件放到public/index.html文件中 下載html-webpack-plugin本地軟件包(命令：npm install --save-dev html-webpack-plugin) 配置webpack.config.js讓W(xué)ebpack擁有插件功能
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins : [ // 插件
new HtmlWebpackPlugin({
template : path.resolve(__dirname, 'public/index.html'), // 模板文件
filename : path.resolve(__dirname, 'dist/login/index.html') // 輸出文件
})
]
};
然后運(yùn)行打包命令npm run build，重新打包
6.4 打包c(diǎn)ss代碼
note：Webpack默認(rèn)只識別js代碼
步驟：
準(zhǔn)備css文件代碼，將其引入到src/login/index.js中(引入語法：import ‘index.js’)下載scc-loader和style-loader本地軟件包(命令：npm install --save-dev css-loader style-loader)配置webpack.config.js讓W(xué)ebpack擁有加載器功能
module.exports = {
module: {
rules: [
{
test: /\.css$/i, // 匹配后綴為.css的文件，不區(qū)分大小寫
use: ["style-loader", "css-loader"], // 從后往前匹配css、style
},
],
},
};
然后運(yùn)行打包命令npm run build，重新打包
6.5 提取css代碼
將css文件提取到單獨(dú)的文件中，可以讓css文件被瀏覽器緩存，減少js文件體積
步驟：
下載mini-css-extract-plugin本地軟件包(命令：npm install --save-dev mini-css-extract-plugin)配置webpack.config.js讓W(xué)ebpack擁有提取css代碼的插件功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins : [ // 插件
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i, // 匹配后綴為.css的文件，不區(qū)分大小寫
use: [MiniCssExtractPlugin.loader, "css-loader"], // 從后往前匹配
},
],
},
};
然后運(yùn)行打包命令npm run build，重新打包
note：不能和style-loader一起使用
6.6 壓縮css代碼
步驟：
下載css-minimizer-webpack-plugin本地軟件包(命令：npm install --save-dev css-minimizer-webpack-plugin)配置webpack.config.js讓W(xué)ebpack擁有壓縮css代碼的插件功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins : [ // 插件
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i, // 匹配后綴為.css的文件，不區(qū)分大小寫
use: [MiniCssExtractPlugin.loader, "css-loader"], // 從后往前匹配
},
],
},
optimization: { // 壓縮js或css代碼在此處配置
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
`...`,
new CssMinimizerPlugin(),
],
},
};
最后運(yùn)行打包命令npm run build，重新打包
6.7 打包less代碼
less-loader需要配合less軟件包使用
步驟：
新建less代碼并引入到src/login/index.js中(import ‘./index.less’)下載less和less-loader本地軟件包(命令：npm install less less-loader --save-dev)配置webpack.config.js讓W(xué)ebpack擁有打包less代碼的功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
plugins : [ // 插件
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.css$/i, // 匹配后綴為.css的文件，不區(qū)分大小寫
use: [MiniCssExtractPlugin.loader, "css-loader"], // 從后往前匹配
},
{
test: /\.less$/i, // 打包less代碼
use: [
// compiles Less to CSS
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
},
],
},
optimization: { // 壓縮js或css代碼在此處配置
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
`...`,
new CssMinimizerPlugin(),
],
},
};
最后運(yùn)行打包命令npm run build，重新打包
6.8 打包圖片
資源模塊 Webpack5 內(nèi)置資源模塊(字體、圖片等)打包，無需額外的loader
步驟：
配置webpack.config.js讓W(xué)ebpack擁有打包less圖片的功能
占位符 [hash] 對模塊內(nèi)容做算法計(jì)算，得到映射的數(shù)字字母組合的字符串占位符[ext]使用當(dāng)前模塊原本后綴的占位符，例如.png/.jpg等字符串占位符[query] 保留引入文件時(shí)代碼中查詢參數(shù)(只有URL下生效)
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif)$/i, // 匹配后綴為png|jpg|jpeg|gif的文件
type: 'asset', // 判斷臨界值默認(rèn)為8KB，大于8KB的文件，發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出URL地址；小于8KB的文件，導(dǎo)出一個(gè)data URI(base64字符串)
generator: {
filename: 'assets/[hash][ext][query]' // 配置輸出文件的格式
}
}
],
},
最后運(yùn)行打包命令npm run build，重新打包
6.9 搭建開發(fā)環(huán)境
開發(fā)環(huán)境：配置webpack-dev-server快速開發(fā)應(yīng)用程序
作用： 啟動Web服務(wù)，自動檢測代碼變化，熱更新到網(wǎng)頁(dist目錄和打包是在內(nèi)存里)
步驟：
下載webpack-dev-server軟件包到當(dāng)前項(xiàng)目(命令：npm install --save-dev webpack-dev-server)設(shè)置開發(fā)模式，并配置自定義命令
// 設(shè)置webpack.config.js中的mode為開發(fā)模式
module.exports = {
// ...
mode : 'development',
};
// 在package.json中設(shè)置自定義命令
"scripts": {
"dev": "webpack serve --open"
},
使用npm run dev來啟動開發(fā)服務(wù)器
note： 默認(rèn)以public文件夾作為服務(wù)器根目錄；并且也會將output.path中的內(nèi)容放到這個(gè)根目錄中(只在內(nèi)存中)
6.10 打包模式
打包模式：告知webpack使用相應(yīng)模式的內(nèi)置優(yōu)化
分類：
模式名稱模式名稱特點(diǎn)場景開發(fā)模式development調(diào)試代碼，實(shí)時(shí)加載，模塊熱替換等本地開發(fā)生產(chǎn)模式production壓縮代碼，資源優(yōu)化，更輕量打包上線
兩種設(shè)置方式(命令行設(shè)置的優(yōu)先級更高)：
// 1、在webpack.config.js配置文件設(shè)置mode選項(xiàng)
module.exports = {
// ...
mode : 'development/production',
};
// 2、在package.json命令行設(shè)置mode參數(shù)
"scripts": {
"build" : "webpack --mode=production",
"dev": "webpack serve --open --mode=development"
},
6.11 打包模式的應(yīng)用
實(shí)現(xiàn)在開發(fā)模式下用style-loader，在生產(chǎn)模式下提取css代碼
方案一：在webpack.config.js中配置導(dǎo)出函數(shù)，但是局限性大(只接受兩種模式)
方案二：借助cross-env(跨平臺通用)包命令，設(shè)置參數(shù)區(qū)分環(huán)境
步驟：
下載cross-env軟件包到當(dāng)前項(xiàng)目配置package.json中自定義命令，傳入?yún)?shù)名和值，在webpack.config.js區(qū)分不同環(huán)境使用配置
// 1、在webpack.config.js配置文件設(shè)置mode選項(xiàng)
module.exports = {
// ...
module: {
rules: [
{
test: /\.css$/i, // 匹配后綴為.css的文件，不區(qū)分大小寫
use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,"css-loader"], // 從后往前匹配
},
{
test: /\.less$/i,
use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'],
},
],
},
};
// 2、在package.json命令行設(shè)置mode參數(shù)
"scripts": {
"build": "cross-env NODE_ENV=production webpack --mode=production",
"dev": "cross-env NODE_ENV=development webpack serve --mode=development --open"
},
重新打包觀察變化
方案三：配置不同的webpack.config.js(適用于多種模式差異性較大的情況)
6.12 注入環(huán)境變量
實(shí)現(xiàn)在開發(fā)模式下打印語句生效，生產(chǎn)模式下打印語句生效
問題：cross-env設(shè)置的變量只在Node.js環(huán)境變量中有效，前端代碼無法訪問process.env.NODE_ENV
使用Webpack內(nèi)置的DefinPlugin插件(在編譯時(shí)，將前端代碼中匹配的變量名，替換為值或表達(dá)式)
// 1、在webpack.config.js配置文件設(shè)置plugins選項(xiàng)
const webpack = require("webpack");
config = {
plugins : [ // 插件
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
],
};
module.exports = config
6.13 開發(fā)環(huán)境調(diào)錯(cuò)-source-map
問題： 代碼被壓縮和混淆，無法正確確定源代碼位置(行數(shù)和列數(shù))
source map：可以準(zhǔn)確追蹤error和warning在原始代碼的位置(僅適用于開發(fā)環(huán)境，不要在生產(chǎn)環(huán)境使用)
設(shè)置webpack.config.js配置devtool選項(xiàng)
module.exports = {
// ...
devtool : 'inline-source-map' // 將源代碼位置信息一起打包在js文件內(nèi)
}
6.14 解析別名 alias
解析別名：配置模塊使import引入模塊更簡單
在webpack.config.js中配置解析別名@來表示src絕對路徑
module.exports = {
// ...
resolve : {
alias : {
'@' : path.resolve(__dirname, 'src')
}
}
}
6.15 優(yōu)化-CDN的使用
使用CDN的作用：把靜態(tài)文件/第三方庫放在CDN網(wǎng)絡(luò)中各個(gè)服務(wù)器中，供用戶就近請求獲取
需求：實(shí)現(xiàn)開發(fā)模式使用本地第三方庫，生產(chǎn)模式下使用CDN加載引入
步驟：
在html中引入第三方庫的CDN地址，并用模板語法判斷
<%if(htmlWebpackPlugin.options.useCdn){ %>
<%}%>
在webpack.config.js中[externals]外部擴(kuò)展選項(xiàng)(防止某些import的包被打包)
const config = {
// ...
plugins:[
new HtmlWebpackPlugin({
// ...
// 自定義屬性，在html模版<%if(htmlWebpackPlugin.options.useCdn){ %>使用
useCdn : process.env.NODE_ENV === 'production',
})
]
}
if(process.env.NODE_ENV === 'production')
{
// key : 代碼中import from 后面的模塊標(biāo)識符字符串
// value : 替換在原地的變量名
config.externals = {
'bootstrap/dist/css/bootstrap.min.css' : 'bootstrap',
'axios' : 'axios',
}
}
柚子快報(bào)邀請碼778899分享：webpack node
參考文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
iShopping愛購優(yōu)選
