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

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