《黑马前端ajax+node.js+webpack+git教程》（笔记）——node.js教程+webpack教程（nodejs教程）

Dontla2025-05-20 18:29

黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖

文章目录

Node.js与Webpack-01.Node.js入门

定义和作用

什么是前端工程化？（离不开node.js）

Node.js 为何能执行JS?

Node.js 安装

https://nodejs.org/zh-cn

终端如何使用node.js

可以用windows控制台
也可以用vscode

建议用cmd终端，别用poweshell终端。

vocode配置默认终端为windows cmd


代码示例

需求
实战

总结

Node.js与Webpack-02.fs模块-读写文件（fs.writeFile()、fs.readFile()）

定义

代码示例


js 复制代码 
const fs = require('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())
    }
})

Node.js与Webpack-03.path模块-路径处理

问题示例

path模块（__dirname获取绝对文件路径；path.join()拼接跨平台路径）

代码示例

建议在代码中用__dirname获取文件绝对路径，这样不论在哪个工作路径运行代码，代码都能找到相对的资源文件；同时path模块在处理/或\时会自动做跨平台处理，不用自行构建

Node.js与Webpack-04.案例-压缩前端html

定义

代码示例（将html代码中的换行符和回车符都替换成空格）

/g表示全局匹配

Node.js与Webpack-05.URL中的端口号

定义

常见服务程序

总结

Node.js与Webpack-06.http模块-创建Web服务

创建web服务http接口

代码示例



Node.js与Webpack-07.案例-浏览时钟

需求

步骤

代码

Node.js与Webpack-08.模块化简介（如何定义js模块）

定义（模块就是一个js文件）

CommonJS标准（默认支持，不需要添加package.json）（导出：module.exports = {}、导入：require('模块名或路径')）

代码示例


总结

Node.js与Webpack-09.ECMAScript标准-默认导出和导入（官方推荐）（导出：export default = {}、导入：import 变量名 from '模块名或路径'）

定义（ECMAScript标准导出和导入，需要在模块下增加package.json）

代码示例

总结

Node.js与Webpack-10.ECMAScript标准-命名导出和导入（如果不想一次性全部导入，想只导入需要的可以用这个）

定义

代码示例

总结

Node.js与Webpack-11.包的概念

定义（一个文件夹，有两种类型：项目包、软件包）

唯一出口文件index.js不是必须的，如果不存在，就会到package.json中去找定义的入口文件（main属性指定的入口文件）

代码示例





总结

Node.js与Webpack-12.npm软件包管理器

定义与使用

示例

目标


终端打开项目文件夹
执行npm init -y初始化package.json
html 复制代码 
npm init -y
html 复制代码 
{
  "name": "05",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}
执行npm i dayjs安装库

装好后自动在package.json中记录了这个包版本：

执行node server.js使用软件包

总结

Node.js与Webpack-13.npm安装所有依赖

定义：npm i可根据package.json下载所需软件包

测试

总结

Node.js与Webpack-14.npm全局软件包-nodemon

定义

安装

全局安装：npm i nodemon -g

运行测试

html 复制代码 
nodemon server.js

修改代码后，按ctrl + s保存代码，程序将会自动重启。

总结

Node.js与Webpack-15.Node.js概念和常用命令总结

Node.js模块化总结

Node.js包总结

常用命令总结

Node.js与Webpack-16.Webpack简介以及体验

Webpack介绍

使用示例

html 复制代码 
npm i webpack webpack-cli --save-dev

具体参考文章：webpack介绍（现代JS应用静态模块打包工具，在内部构建依赖图，映射项目所需模块，生成打包后的文件）webpack.config.js

Node.js与Webpack-17.Webpack修改入口和出口

webpack.config.js文件（位于项目根目录）

示例文件：

文件中建议入口文件和出口文件都使用绝对路径。

入口和出口官方文档

Node.js与Webpack-18.案例-用户登录-长度判断

案例需求定义

代码示例

https://gitee.com/arnold_s/my-learning-test/tree/master/20250501_node.jsTest/08_WEBPACK_STUDY

Node.js与Webpack-19.Webpack自动生成html文件（html-webpack-plugin插件）

定义

官方文档

http://webpack.docschina.org/plugins/

http://webpack.docschina.org/plugins/html-webpack-plugin

完整参数：
https://github.com/jantimon/html-webpack-plugin#options

实战训练

html 复制代码 
npm i html-webpack-plugin --save-dev

配好执行命令打包就行：

Node.js与Webpack-20.Webpack打包css代码（将css打包到js代码中）（css-loader插件）

定义

官网

http://webpack.docschina.org/loaders/css-loader/

注意加载器会从后往前使用，先使用css-loader，再使用style-loader。

实战


执行npm run build，然后css被打包到js里了：

打开dist中的login.html：

Node.js与Webpack-21.优化-提取css代码（将css代码打包成独立文件）（mini-css-extract-plugin插件）

定义

html 复制代码 
npm install --save-dev mini-css-extract-plugin

官网

http://webpack.docschina.org/plugins/mini-css-extract-plugin/

实操

html 复制代码 
npm run build

生成了单独的main.css文件：

html文件中也有引入main.css的代码：

打开html，也没有问题：


Node.js与Webpack-22.优化-压缩过程（压缩代码压缩、生产模式压缩）（css-minimizer-webpack-plugin插件）

问题

上一节自己写的css代码并没有被压缩：

定义

http://webpack.docschina.org/plugins/mini-css-extract-plugin/#minimizing-for-production

http://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/

使用方法

实操

步骤：
安装
html 复制代码 
npm i css-minimizer-webpack-plugin --save-dev
打开配置文件webpack.config.js加上代码，按照官网http://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/上的加就行：
html 复制代码 
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
html 复制代码 
    // 优化打包过程
    optimization: {
        minimizer: [
            // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
            // `...`,
            new CssMinimizerPlugin(),
        ],
    },

记得取消...注释，具体原因参考文章：为什么在Webpack 5 中，直接添加new CssMinimizerPlugin()到optimization.minimizer数组而不取消注释...语法，会导致JavaScript压缩失效？

执行打包npm run build

然后我发现没压缩，原因不知道是谁在webpack.config.js中设置了开发模式而不是生产模式：

解决方法可以是直接把配置文件改成生产模式，也可以根据官网把 optimization.minimize 设置为 true:

http://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/

然后重新编译发现可以打包了：

Node.js与Webpack-23.Webpack打包less代码

http://webpack.docschina.org/loaders/less-loader#root

https://www.bilibili.com/video/BV1MN411y7pw/?p=105

定义



Node.js与Webpack-24.Webpack打包图片

http://webpack.docschina.org/guides/asset-modules/#root

https://www.bilibili.com/video/BV1MN411y7pw/?p=106

定义


Node.js与Webpack-25.案例-用户登录-功能完成

定义


操作

html 复制代码 
cd D:\3_coding\my-learning-test_edit\20250501_node.jsTest\09_webpack_user_login_axios
npm i axios
npm i webpack webpack-cli --save-dev

npm install --save-dev css-loader style-loader less less-loader html-webpack-plugin mini-css-extract-plugin terser-webpack-plugin clean-webpack-plugin babel-loader @babel/core @babel/preset-env

npm run build

Node.js与Webpack-26.Webpack搭建开发环境（webpack-dev-server）增加开发效率

定义





实操

html 复制代码 
npm i webpack-dev-server --save-dev


html 复制代码 
npm run dev

Node.js与Webpack-27.Webpack打包模式（development和production）

定义

不建议在webpack.config.js中改，建议在package.json中改

Node.js与Webpack-28.Webpack打包模式应用（需求:在开发模式下用 style-loader内嵌更快，在生产模式下提取 css 代码）

解决方案：使用cross-env环境变量工具，可以设置不同环境变量来读取process.env来配置不同打包模式（需修改代码）

实操

html 复制代码 
npm i cross-env --save-dev


Node.js与Webpack-29.前端-注入环境变量（注意：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问process.env.NODE_ENV，所以需要DefinePlugin插件来注入环境变量）

定义



实操


在开发环境运行代码和在打包后生产环境运行，呈现不同效果。

Node.js与Webpack-30.Webpack开发环境调错（inline-source-map插件）

定义

实操（原来webpack.config.js的配置就是js对象的配置）

配置了它之后，浏览器在开发模式下就能定位到准确代码位置，生产模式下无法定位

Node.js与Webpack-31.Webpack解析别名alias

定义

通过这个路径就能找到了：

实操

Node.js与Webpack-32.优化-生产模式下使用CDN（bootcdn）

定义


实操

https://www.bootcdn.cn/axios/




然后测试：

开发环境：

html 复制代码 
npm run dev

生产环境：

html 复制代码 
npm build

Node.js与Webpack-33.Webpack多页面打包

定义


感觉内容好多好乱，看得我都懵逼了！

https://www.bilibili.com/video/BV1MN411y7pw?p=115

Node.js与Webpack-34.案例-打包发布文章页面

定义


懵，尤其对打包配置，配来配去，不知道为啥这么配，配的地方又多，不知道学了ts后会不会好点！！

Node.js与Webpack-35.优化-分割公共代码（打包的代码有复用冗余，太大，用这个方法提取公共代码）

定义

说是后面vue react之类的，浏览器没法直接运行，必须得用webpack打包的

Node.js与Webpack-36.总结

总结

vue react 小程序

Git-01.初识

Git-02.仓库

Git-03.三个区域

Git-04.文件状态

Git-05.暂存区使用

Git-06.练习-登录页面

Git-07.回退版本

Git-08.删除文件

Git-09.忽略文件

Git-10.分支

Git-11.练习-登录修复

Git-12.分支-合并与删除

Git-13.分支-合并与提交

Git-14.分支-合并冲突

Git-15.常用命令

Git-16.远程仓库

Git-17.远程仓库-克隆

Git-18.多人协同开发

Git-19.在VSCode中使用

Git-20.部署黑马头条数据管理平台

Git-21.命令总结

前端框架前置课程完结篇

相关推荐
会飞的鱼先生14 分钟前
vue2、vue3项目打包生成txt文件-自动记录打包日期：git版本、当前分支、提交人姓名、提交日期、提交描述等信息 和 前端项目的版本号json文件
前端·vue.js·git·json
！win ！33 分钟前
uni-app项目从0-1基础架构搭建全流程
前端·uni-app
c_zyer1 小时前
使用 nvm 管理 Node.js 和 npm 版本
前端·npm·node.js
布Coder1 小时前
前端 vue + element-ui 框架从 0 - 1 搭建
前端·javascript·vue.js
i_am_a_div_日积月累_1 小时前
Element Plus 取消el-form-item点击触发组件，改为原生表单控件
前端·vue.js·elementui
集成显卡1 小时前
网页 H5 微应用接入钉钉自动登录
前端·后端·钉钉
paintstar1 小时前
el-scrollbar 获取滚动条高度 并将滚动条保持在低端
前端·学习·vue·css3
天天进步20152 小时前
前端测试策略：单元测试到 E2E 测试
前端·单元测试
多啦爱梦的梦想3 小时前
项目中把webpack 打包改为vite 打包
前端·webpack
小刘不知道叫啥3 小时前
简单说一下 Webpack分包
前端·javascript·webpack·node.js
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06Coze扣子平台完整体验和实践（附国内和国际版对比）07Ubuntu24.04安装中文输入法08YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU09DeepSeek各版本说明与优缺点分析10YOLOV11改进1-检测头篇