【前端】Nodejs与Webpack（学习笔记）

一、Node.js入门

1、概述

  1. Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码，因为这个特点，它可以用来编写服务器后端的应用程序
  2. Node.js 作用除了编写后端应用程序，也可以对前端代码进行压缩，转译，整合等等，提高前端开发和运行效率
  3. Node.js 基于Chrome V8 引擎封装，独立执行 JS 代码，但是语法和浏览器环境的 V8 有所不同，没有 document 和 window 但是都支持 ECMAScript 标准的代码语法

2、初体验

代码：

console.log("hello")

运行：

node test.js

2、fs模块-读写文件

模块：类似插件，封装了方法和属性

fs 模块：封装了与本机文件系统进行交互的，方法和属性

// 加载fs模块对象
const fs = require('fs')// 写入文件内容
fs.writeFile('./02.txt', 'hello Node.js', err => {if (err) console.log(err)else console.log("写入成功")
})// 读取文件内容
fs.readFile('./02.txt', (err, data) => {if (err) console.log(err)else console.log(data.toString())
})

3、path模块-路径处理

Node.js 待执行的 JS 代码中要用绝对路径

Node.js 执行 JS 代码时，代码中的路径都是以终端所在文件夹出发查找相对路径，而不是以我们认为的从代码本身出发，会遇到问题，所以在 Node.js 要执行的代码中，访问其他文件，建议使用绝对路径

使用模块内置变量 __dirname配合 path.join() 来得到绝对路径使用

MacOS与Windows的路径写法不同，使用path.join()拼接路径

path.join('03', 'dir/js', 'index.js')
// win: '03\dir\js\index.js'
// mac: '03/dir/js/index.js'

const fs = require('fs')
const path = require('path')fs.readFile(path.join(__dirname, '../02.txt'), (err, data) => {if (err) console.log(err)else console.log(data.toString())
})

4、http模块-创建Web服务

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

const http = require('http')
const fs = require('fs')
const path = require('path')
const server = http.createServer()server.on('request', (req, res) => {res.setHeader('Content-Type', 'text/html;charset=utf-8')if (req.url === '/') {fs.readFile(path.join(__dirname, 'index.html'), (err, data) => {if (err) console.log(err)else res.end(data.toString())})} else {res.end('<h1>404</h1>')}
})server.listen(8080, () => {console.log('web服务已启动')
})

二、Nodejs模块化

1、模块化简介

模块化：Nodejs中，每个文件都是单独的模块。项目由多个模块文件组成。

优点：提高代码复用性，按需加载，独立作用域

CommonJS 标准

导出语法：

module.exports = {对外属性名: 模块内私有变量
}

导入语法：

const 变量名 = require('模块名或路径')
// Node.js 环境内置模块直接写模块名（例如：fs，path，http）
// 自定义模块：写模块文件路径（例如：./utils.js)

变量名的值接收的就是目标模块导出的对象

2、ECMAScript 标准

1）默认导出和导入

导出语法：

export default {对外属性名: 模块内私有变量
}

导入语法：

import 变量名 from '模块名或路径'

变量名的值接收的就是目标模块导出的对象

Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: ‘module’ 来进行设置

{ "type": "module" }
2）命名导出和导入
export 修饰定义语句

命名导入语法：

import { 同名变量 } from '模块名或路径'

注意：同名变量指的是模块内导出的变量名

与默认导出如何选择：

  • 按需加载，使用命名导出和导入
  • 全部加载，使用默认导出和导入

3、包的概念

包：将模块，代码，其他资料整合成一个文件夹

包分类：

  • 项目包：主要用于编写项目和业务逻辑
  • 软件包：封装工具和方法进行使用

包的要求：根目录中，必须有 package.json 文件（记录包的清单信息）

{"name": "utils","version": "1.0.0","description": "一个包","main": "index.js","author": "wmh","license": "MIT"
}

包的使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象

导出模块：

/*** index.js: utils 工具包的唯一出口* 作用：把所有工具模块方法集中起来，统一向外暴露*/
const { getArraySum } = require('./lib/arr.js')
const { checkUser, checkPwd } = require('./lib/str.js')// 统一导出所有函数
module.exports = {getArraySum,checkUser,checkPwd
}

导入模块：

const obj = require('./utils')

4、npm

npm：软件包管理器，用于下载和管理 Node.js 环境中的软件包

npm 使用步骤：

  1. 初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）
  2. 下载软件包：npm i 软件包名称
  3. 使用软件包

npm 安装所有依赖：当前项目目录下，打开终端，执行 npm i 安装所有依赖软件包

# 执行js文件
node xxx# 初始化package.json
npm init -y# 下载本地软件包
npm i 软件包名# 下载全局软件包
npm i 软件包名 -g# 删除软件包
npm uni 软件包名

5、nodemon

  • 本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules
  • 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

nodemon 作用：替代 node 命令，检测代码更改，自动重启程序

  1. 安装：npm i nodemon -g （-g 代表安装到全局环境中）
  2. 运行：nodemon 待执行的目标 js 文件

二、Webpack

1、Webpack概述

Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

只有和入口有直接/间接引入关系的模块，才会被打包

1、下载 webpack webpack-cli 到项目（版本独立）

npm i webpack webpack-cli --save-dev

2、把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

"scripts": {"build" : "webpack"
}

3、项目中运行工具命令，采用自定义命令的方式（局部命令）

npm run build

2、修改打包入口和出口

1、项目根目录，新建 Webpack.config.js 配置文件

2、导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

const path = require('path')module.exports = {entry: path.resolve(__dirname, 'src/index.js'),output: {path: path.resolve(__dirname, 'dist'),filename: './test/index.js'}
}

3、自动生成 html 文件

插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源

1、下载 html-webpack-plugin 本地软件包到项目中

npm i html-webpack-plugin --save-dev

2、配置 webpack.config.js 让 Webpack 拥有插件功能

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({template: './public/login.html', // 模板文件filename: './login/index.html' // 输出文件})]
}

4、打包并提取 css 代码

css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

1、下载 mini-css-extract-plugin 插件软件包到本地项目中

npm i --save-dev mini-css-extract-plugin css-loader

2、配置 webpack.config.js 让 Webpack 拥有该插件功能

const MiniCssExtractPlugin = require("mini-css-extract-plugin")module.exports = {module: {rules: [{test: /\.css$/i,use: [MiniCssExtractPlugin.loader, "css-loader"],},],},plugins: [new MiniCssExtractPlugin()]
};

5、打包 less 代码

加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

1、新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中）

html {body {background: url('./assets/login-bg.png') no-repeat center/cover;}
}

2、less 样式引入到 src/login/index.js 中

import './index.less'

3、下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

4、配置 webpack.config.js

module.exports = {module: {rules: [{test: /\.less$/i,use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]}]}
}

6、打包图片

资源模块：Webpack5 内置了资源模块的打包，无需下载额外 loader

1、配置 webpack.config.js 让 Webpack 拥有打包图片功能

  • 占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串
  • 占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串
  • 占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

2、判断临界值默认为 8KB

大于 8KB 文件：发送一个单独的文件并导出 URL 地址

小于 8KB 文件：导出一个 data URI（base64字符串）

3、在 src/login/index.js 中给 img 标签添加 logo 图片

import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

4、配置 webpack.config.js 让 Webpack 拥有打包图片功能

module.exports = {module: {rules: [{test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset',generator: {filename: 'assets/[hash][ext][query]'}}]}
}

7、搭建开发环境

启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

1、下载 webpack-dev-server 软件包到当前项目

npm i webpack-dev-server --save-dev

2、配置自定义命令，并设置打包的模式为开发模式

module.exports = {mode: 'development'
}"scripts": {"dev": "webpack serve --mode=development"
},

3、启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页

npm run dev

热更新：在 js / css 文件中修改代码保存后，会实时反馈到浏览器

8、打包模式

打包模式：告知 Webpack 使用相应模式的内置优化

模式名称模式名字特点场景
开发模式development调试代码，实时加载，模块热替换等本地开发
生产模式production压缩代码，资源优化，更轻量等打包上线

开发模式注重代码热替换更快，让开发调试代码更便捷，生产模式注重项目体积更小，更轻量，适配不同的浏览器环境

方式1：在 webpack.config.js 配置文件设置 mode 选项

module.exports = {mode: 'production'
}

方式2：在 package.json 命令行设置 mode 参数

"scripts": {"build": "webpack --mode=production","dev": "webpack serve --mode=development"
},

命令行设置优先级高于配置文件

8、打包模式的应用

借助 cross-env （跨平台通用）包命令，设置参数区分环境

1、下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2、配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

3、在 webpack.config.js 区分不同环境使用不同配置

module: {rules: [{test: /\.css$/i,// use: ['style-loader', "css-loader"],use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]},{test: /\.less$/i,use: [// compiles Less to CSSprocess.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,'css-loader','less-loader',],}]
}

9、前端注入环境变量

前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问 process.env.NODE_ENV

解决：使用 Webpack 内置的 DefinePlugin 插件

作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

配置 webpack.config.js 中给前端注入环境变量

const webpack = require('webpack')module.exports = {plugins: [new webpack.DefinePlugin({// key 是注入到打包后的前端 JS 代码中作为全局变量// value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)})]
}

10、开发环境调错 source map

source map：可以准确追踪 error 和 warning 在原始代码的位置

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

设置：webpack.config.js 配置 devtool 选项

module.exports = {devtool: 'inline-source-map'
}

source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

11、设置解析别名路径

解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单

配置解析别名：在 webpack.config.js 中设置

const config = {resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
}

引入目标模块写的路径就更简单了

import { checkPhone, checkCode } from '@/utils/check.js'

12、CDN使用

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

CDN：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

1、在 html 中引入第三方库的 CDN 地址 并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2、配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {// 外部扩展（让 webpack 防止 import 的包被打包进来）config.externals = {// key：import from 语句后面的字符串// value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）'bootstrap/dist/css/bootstrap.min.css': 'bootstrap','axios': 'axios'}
}

const config = {plugins: [new HtmlWebpackPlugin({// 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用useCdn: process.env.NODE_ENV === 'production'})]
}

13、多页面打包

让 Webpack 同时打包登录和内容列表页面

  • 单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到
  • 多页面：多个 html 文件，切换页面实现不同业务逻辑展示

  1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出

  2. 下载 form-serialize 包并导入到核心代码中使用

  3. 配置 webpack.config.js 多入口和多页面的设置

const config = {entry: {'模块名1': path.resolve(__dirname, 'src/入口1.js'),'模块名2': path.resolve(__dirname, 'src/入口2.js'),},output: {path: path.resolve(__dirname, 'dist'),filename: './[name]/index.js'  }plugins: [new HtmlWebpackPlugin({template: './public/页面2.html', // 模板文件filename: './路径/index.html', // 输出文件chunks: ['模块名2']})new HtmlWebpackPlugin({template: './public/页面2.html', // 模板文件filename: './路径/index.html', // 输出文件chunks: ['模块名2']})]
}

14、分割公共代码

把 2 个以上页面引用的公共代码提取

配置 webpack.config.js 的 splitChunks 分割功能

const config = {optimization: {splitChunks: {chunks: 'all', // 所有模块动态非动态移入的都分割分析cacheGroups: { // 分隔组commons: { // 抽取公共模块minSize: 0, // 抽取的chunk最小大小字节minChunks: 2, // 最小引用数reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用name(module, chunks, cacheGroupKey) { // 分离出模块文件名const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2return `./js/${allChunksNames}` // 输出到 dist 目录下位置}}}}}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/316133.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

了解深度学习优化器：Momentum、AdaGrad、RMSProp 和 Adam

了解深度学习优化器：Momentum、AdaGrad、RMSProp 和 Adam

slavahead 一、介绍 DEEP学习在人工智能领域迈出了一大步。目前&#xff0c;神经网络在非表格数据&#xff08;图像、视频、音频等&#xff09;上的表现优于其他类型的算法。深度学习模型通常具有很强的复杂性&#xff0c;并提出数百万甚至数十亿个可训练的参数。这就是为什么在…
阅读更多...
机器学习（三） -- 特征工程（2）

机器学习（三） -- 特征工程（2）

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 未完待续…… 目录 系列文章目录 前言 三、特征…
阅读更多...
机器学习-生存分析：如何基于随机生存森林训练乳腺癌风险评估模型？

机器学习-生存分析：如何基于随机生存森林训练乳腺癌风险评估模型？

一、 引言 乳腺癌是女性最常见的恶性肿瘤之一&#xff0c;也是全球范围内女性死亡率最高的癌症之一。据统计&#xff0c;每年全球有超过200万人被诊断为乳腺癌&#xff0c;其中约60万人死于该疾病。因此&#xff0c;乳腺癌的早期诊断和风险评估对于预防和治疗乳腺癌具有非常重要…
阅读更多...
npm安装 electron 报错

npm安装 electron 报错

1、问题一 解决&#xff1a; 降低一下node版本&#xff0c; 具体降低到多少不确定&#xff0c;反正我当时用的是 node 14.16.1 2、经过上面之后&#xff0c;有可能会出现下面一个问题 解决 npm config set electron_mirror "https://npm.taobao.org/mirrors/electron/&…
阅读更多...
异地环控设备如何远程维护？贝锐蒲公英解决远程互联难题

异地环控设备如何远程维护？贝锐蒲公英解决远程互联难题

青岛某企业致力于孵化设备、养禽设备和养猪设备的研发、生产和服务&#xff0c;历经三十多年发展&#xff0c;目前已成长为行业主要的养殖装备及工程服务提供商&#xff0c;产品覆盖养殖产业链中绝大多数环节&#xff0c;涉及自动化设备、环控设备、整体解决方案等。 在实际应用…
阅读更多...
是否需要跟上鸿蒙（OpenHarmony）开发岗位热潮？

是否需要跟上鸿蒙（OpenHarmony）开发岗位热潮？

前言 自打华为2019年发布鸿蒙操作系统以来&#xff0c;网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android&#xff0c;更激烈的讨论随之而来。 本文没有宏大的叙事&#xff0c;只有基于现实的考量。 通过本文&#xff0c;你将了解到&#xff1a; Har…
阅读更多...
鸿蒙HarmonyOS- 弹框组件库

鸿蒙HarmonyOS- 弹框组件库

简介 今天介绍一个基于ArkUI框架开发的弹框组件库&#xff0c;该库基于ArkUI的弹框基础功能和自定义能力。针对通用的弹框业务场景&#xff0c;该库提供了丰富的组件弹窗功能。 包括确认输入弹窗、列表展示选择弹窗、自定义底部/顶部弹窗、自定义动画弹窗、自定义全屏弹窗、消息…
阅读更多...
【教学类-43-05】 不可用 20231229 N宫格数独5.0（n=1-9） （ChatGPT AI对话大师生成 随机数字填空 ）

【教学类-43-05】 不可用 20231229 N宫格数独5.0（n=1-9） （ChatGPT AI对话大师生成 随机数字填空 ）

说明&#xff1a;本代码使用“”随机数字填空”&#xff0c;结果有误差 不能使用 背景需求&#xff1a; 大4班20号说&#xff1a;我不会做这种&#xff08;九宫格&#xff09;&#xff0c;我做的是小格子的&#xff0c; 他把手工纸翻过来&#xff0c;在反面自己画了矩阵格子。…
阅读更多...
Vue学习计划-Vue3--核心语法（一）OptionsAPI、CompositionAPI与setup

Vue学习计划-Vue3--核心语法（一）OptionsAPI、CompositionAPI与setup

1. OptionsAPI与CompositionAPI Vue2的API设计是Options(配置)风格的Vue3的API设计是Composition(组合)风格的 Options API的弊端&#xff1a; Options类型的API&#xff0c;数据、方法、计算属性等&#xff0c;是分散在&#xff1a;data、methods、computed中的&#xff0c;若…
阅读更多...
【ESP-NOW Web 服务器传感器仪表板 （ESP-NOW + Wi-Fi）】

【ESP-NOW Web 服务器传感器仪表板 （ESP-NOW + Wi-Fi）】

【ESP-NOW Web 服务器传感器仪表板 &#xff08;ESP-NOW Wi-Fi&#xff09;】 1. 前言2. 同时使用 ESP-NOW 和 Wi-Fi3. 项目概况4. 先决条件4.1 环境配置4.2 DHT 库4.3 ESPAsyncWebSrv服务器库4.4 Arduino_JSON4.5 所需零件4.6 获取接收板 MAC 地址4.7 ESP32 发送电路 5. ESP3…
阅读更多...
基于多反应堆的高并发服务器【C/C++/Reactor】（中）在EventLoop的任务队列中添加新任务

基于多反应堆的高并发服务器【C/C++/Reactor】（中）在EventLoop的任务队列中添加新任务

任务队列是一个链表&#xff0c;每个节点包含channel类型、文件描述符和操作类型。在添加节点时&#xff0c;需要考虑线程同步&#xff0c;并确保节点被正确地添加到链表中。节点的操作可以写到另一个函数中&#xff0c;以便于程序的维护。在添加任务节点时&#xff0c;需要加互…
阅读更多...
【心得】PHP文件包含高级利用攻击面个人笔记

【心得】PHP文件包含高级利用攻击面个人笔记

目录 一、nginx日志文件包含 二、临时文件包含 三、php的session文件包含 四、pear文件包含 五 、远程文件包含 文件包含 include "/var/www/html/flag.php"; 一 文件名可控 $file$_GET[file]; include $file.".php"; //用php伪协议 &#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023