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

黑马程序员前端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()）

定义

代码示例

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

npm init -y

{"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

运行测试

nodemon server.js

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

总结

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

Node.js模块化总结

Node.js包总结

常用命令总结

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

Webpack介绍

使用示例

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

实战训练

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插件）

定义

npm install --save-dev mini-css-extract-plugin

官网

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

实操

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/

使用方法

实操

步骤：

安装

npm i css-minimizer-webpack-plugin --save-dev

打开配置文件webpack.config.js加上代码，按照官网http://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/上的加就行：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

    // 优化打包过程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.案例-用户登录-功能完成

定义

操作

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-devnpm 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-envnpm run build

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

定义

实操

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

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来配置不同打包模式（需修改代码）

实操

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/

然后测试：

开发环境：

npm run dev

生产环境：

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.命令总结

前端框架前置课程完结篇