Node.js入门与 Webpack模块打包工具
目录
Node.js入门
fs模块-读写文件
path模块-路径处理
压缩前端html
认识URL中的端口号
http模块-创建Web服务
体验 Web 服务除了接口数据以外，还能返回网页资源等
Node.js模块化
ECMAScript标准-默认导出和导入
ECMAScript标准-命名导出和导入
包的概念
npm软件包管理器
npm安装所有依赖
npm全局软件包-nodemon
Node.js概念和常用命令总结
Webpack模块打包工具
Webpack 修改入口和出口
案例-用户登录-长度判断 Webpack 自动生成 html 文件
Webpack-打包 css 代码
优化-提取 css 代码
优化css压缩过程
Webpack-打包 less 代码
Webpack-打包图片
案例-用户登录-引入axios 包
Webpack 搭建开发环境
Webpack 打包模式
Webpack 打包模式的应用
Webpack 前端注入环境变量
Webpack 开发环境调错 source map
Webpack 设置解析别名路径
优化-CDN使用
Webpack 多页面打包
优化-分割公共代码
Node.js入门
官方下载地址：https://nodejs.org/zh-cn/
配置环境变量
Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码
Node.js 有什么用？
- 编写后端程序，提供数据和网页资源，还可以作为前端工程化的工具，翻译压缩整合代码等，提高开发效率
Node.js 为何能执行 JS 代码？
- 基于 Chrome 的 V8 引擎封装
Node.js 与浏览器环境的 JS 最大区别？
- Node.js 环境中没有 BOM 和 DOM，但是也用 JS 语法
Node.js 如何执行代码？
- 在 VSCode 终端中输入：node xxx.js 回车即可执行（注意路径）
fs模块-读写文件
-
模块：类似插件，封装了方法和属性供我们使用
-
fs 模块：封装了与本机文件系统进行交互的，方法和属性
-
fs 模块使用语法如下：
-
加载 fs 模块，得到 fs 对象
const fs = require('fs') -
写入文件内容语法：
fs.writeFile('文件路径', '写入内容', err => { // 写入后的回调函数 }) -
读取文件内容的语法：
fs.readFile('文件路径', (err, data) => { // 读取后的回调函数 // data 是文件内容的 Buffer 数据流 })
-
path模块-路径处理
path.join() 方法有什么用？
- 按照所在本机系统的分隔符作为定界符来链接你传入的路径
__dirname 模块内置变量的值是
- 动态获取当前文件所在文件夹的绝对路径
压缩前端html
-
前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了提高前端开发项目的效率
认识URL中的端口号
- URL 是统一资源定位符，简称网址，用于访问网络上的资源
- 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的任意整数）
- 注意：http 协议，默认访问的是 80 端口
- Web服务：一个程序，用于提供网上信息浏览功能
- 注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用
http模块-创建Web服务
基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序
-
步骤：
- 引入 http 模块，创建 Web 服务对象
- 监听 request 请求事件，对本次请求，做一些响应处理
- 启动 Web 服务监听对应端口号
- 运行本服务在终端进程中，用浏览器发起请求
-
// 1.1 加载 http 模块，创建 Web 服务对象 const http = require('http') const server = http.createServer() // 1.2 监听 request 请求事件，设置响应头和响应体 server.on('request', (req, res) => { // 设置响应头-内容类型-普通文本以及中文编码格式 res.setHeader('Content-Type', 'text/plain;charset=utf-8') // 设置响应体内容，结束本次请求与响应 res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务') }) // 1.3 配置端口号并启动 Web 服务 server.listen(3000, () => { console.log('Web 服务启动成功了') })
体验 Web 服务除了接口数据以外，还能返回网页资源等
-
步骤：
- 基于 http 模块，创建 Web 服务
- 使用 req.url 获取请求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给请求方
- 其他路径，暂时返回不存在的提示
- 运行 Web 服务，用浏览器发起请求
-
const fs = require('fs') const path = require('path') // 1. 基于 http 模块，创建 Web 服务 const http = require('http') const server = http.createServer() server.on('request', (req, res) => { // 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方 if (req.url === '/index.html') { fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => { res.setHeader('Content-Type', 'text/html;charset=utf-8') res.end(data.toString()) }) } else { // 3. 其他路径，暂时返回不存在提示 res.setHeader('Content-Type', 'text/html;charset=utf-8') res.end('你要访问的资源路径不存在') } }) server.listen(8080, () => { console.log('Web 服务启动了') })
Node.js模块化
Node.js 中什么是模块化?
- 每个文件都是独立的模块
模块之间
- 使用特定语法，导出和导入使用
CommonJS 标准规定如何导出和导入模块?
- 导出：module.exports = {},导入：require('模块名或路径')
模块名/路径如何选择?
- 内置模块：写名字。例如：fs，path，http等。自定义模块：写模块文件路径，例如：./utils.js
ECMAScript标准-默认导出和导入
-
导出语法：
export default { 对外属性名: 模块内私有变量 } -
导入语法：
import 变量名 from '模块名或路径'
-
注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: 'module' 来进行设置
{ “type”: "module" }
ECMAScript标准-命名导出和导入
-
命名导出语法：
export 修饰定义语句 -
命名导入语法：
import { 同名变量 } from '模块名或路径'
-
与默认导出如何选择：
- 按需加载，使用命名导出和导入
- 全部加载，使用默认导出和导入
包的概念
-
包：将模块，代码，其他资料整合成一个文件夹，这个文件夹就叫包
-
包分类：
- 项目包：主要用于编写项目和业务逻辑
- 软件包：封装工具和方法进行使用
- 包要求：根目录中，必须有 package.json 文件（记录包的清单信息）
-
包使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象
npm软件包管理器
npm 简介链接： 软件包管理器，用于下载和管理 Node.js 环境中的软件包
npm 使用步骤：
-
初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）
注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线
-
下载软件包：npm i 软件包名称
-
使用软件包
npm安装所有依赖
如何得到需要的所有依赖软件包呢？
直接在项目目录下，运行终端命令：npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules
npm全局软件包-nodemon
-
软件包区别：
- 本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules
- 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置
-
nodemon 作用：替代 node 命令，检测代码更改，自动重启程序
-
nodemon 使用：
- 安装：npm i nodemon -g （-g 代表安装到全局环境中）
- 运行：nodemon 待执行的目标 js 文件
Node.js概念和常用命令总结
-
Node.js 模块化：把每个文件当做一个模块，独立作用域，按需加载，使用特定标准语法导出和导入使用
CommonJS 标准：一般应用在 Node.js 项目环境中
ECMAScript 标准：一般应用在前端工程化项目中
-
Node.js 包：把模块文件，代码文件，其他资料聚合成一个文件夹就是包
项目包：编写项目需求和业务逻辑的文件夹
软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）
- 本地软件包：作用在当前项目，封装的属性/方法，供项目调用编写业务需求
- 全局软件包：作用在所有项目，一般封装的命令/工具，支撑项目运行
-
Node.js 常用命令：
-
Webpack模块打包工具
webpack | webpack 中文文档 | webpack 中文网 (webpackjs.com)
Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容
-
Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）
- 把 less/sass 转成 css 代码
- 把 ES6+ 降级成 ES5 等
- 支持多种模块文件类型，多种模块标准语法
步骤：
-
新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件
npm init -y - 新建 src 源代码文件夹（书写代码）
-
下载 webpack webpack-cli 到项目（版本独立）
npm i webpack webpack-cli --save-dev注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用
-
项目中运行工具命令，采用自定义命令的方式（局部命令）
npm run buildnpm run 自定义命令名字
注意：实际上在终端运行的是 build 右侧的具体命名
-
自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）
Webpack 修改入口和出口
-
Webpack 配置：影响 Webpack 打包过程
-
步骤：
-
项目根目录，新建 Webpack.config.js 配置文件
-
导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）
const path = require('path') module.exports = { //入口 entry: path.resolve(__dirname, 'src/login/index.js'), //出口 output: { path: path.resolve(__dirname, 'dist'), filename: './login/index.js' clean: true // 生成打包后内容之前，清空输出目录 } } -
重新打包
-
案例-用户登录-长度判断 Webpack 自动生成 html 文件
步骤：
-
新建 public/login.html 准备网页模板
-
核心 JS 代码写在 src/login/index.js 文件
-
Webpack 自动生成 html 文件步骤：
-
下载 html-webpack-plugin 本地软件包到项目中
npm i html-webpack-plugin --save-dev -
配置 webpack.config.js 让 Webpack 拥有插件功能
// ... const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { // ... // 插件 plugins: [ new HtmlWebpackPlugin({ template: './public/login.html', // 模板文件 filename: './login/index.html' // 输出文件 }) ] } -
指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源
-
-
运行自定义命令，让 Webpack 打包 JS 代码
Webpack-打包 css 代码
介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码
- 加载器 css-loader：解析 css 代码
- 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）
步骤：
- 准备 css 文件引入到 src/login/index.js
import 'bootstrap/dist/css/bootstrap.min.css' import './index.css' -
下载 css-loader 和 style-loader 本地软件包
npm i css-loader style-loader --save-dev -
配置 webpack.config.js 让 Webpack 拥有该加载器功能
// ... module.exports = { // ... // 加载器 module: { rules: [ // 规则列表 { test: /\.css$/i, // 匹配 .css 结尾的文件 use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM } ] } }; -
打包后运行
优化-提取 css 代码
-
需要：mini-css-extract-plugin 插件来实现
-
注意：不能和 style-loader 一起使用
步骤：
-
下载 mini-css-extract-plugin 插件软件包到本地项目中
npm i --save-dev mini-css-extract-plugin -
配置 webpack.config.js 让 Webpack 拥有该插件功能
// ... const MiniCssExtractPlugin = require("mini-css-extract-plugin") module.exports = { // ... module: { rules: [ { test: /\.css$/i, //不能和 style-loader 一起使用 // use: ['style-loader', 'css-loader'] use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, plugins: [ // ... new MiniCssExtractPlugin({ filename: './[name]/index.css' //输出的地址 }) ] }; -
打包
优化css压缩过程
把单独提取的 css 文件内代码压缩
需要：css-minimizer-webpack-plugin 插件来实现
步骤：
-
下载 mini-css-extract-plugin 插件软件包到本地项目中
npm i css-minimizer-webpack-plugin --save-dev -
配置 webpack.config.js 让 Webpack 拥有该插件功能
// ... const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { // ... // 优化 optimization: { // 最小化 minimizer: [ // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理） `...`, new CssMinimizerPlugin(), ], } }; -
打包
Webpack-打包 less 代码
加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包
步骤：
-
新建 login/index.less 文件，设置背景图样式
-
less 样式引入到 src/login/index.js 中
-
下载 less 和 less-loader 本地软件包
npm i less less-loader --save-dev -
配置 webpack.config.js 让 Webpack 拥有功能
// ... module.exports = { // ... module: { rules: [ // ... { test: /\.less$/i, use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"] } ] } } -
打包
Webpack-打包图片
资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader
步骤：
-
配置 webpack.config.js 让 Webpack 拥有打包图片功能
占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串
占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串
占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）
-
注意：判断临界值默认为 8KB
大于 8KB 文件：发送一个单独的文件并导出 URL 地址
小于 8KB 文件：导出一个 data URI（base64字符串）
-
在 src/login/index.js 中给 img 标签添加 logo 图片
-
配置 webpack.config.js 让 Webpack 拥有打包图片功能
// ... module.exports = { // ... module: { rules: [ // ... { test: /\.(png|jpg|jpeg|gif)$/i, type: 'asset', generator: { filename: 'assets/[hash][ext][query]' } } ] } } -
打包
案例-用户登录-引入axios 包
步骤：
-
使用 npm 下载 axios
npm i axios -
准备并修改 utils 工具包源代码导出实现函数 import axios from 'axios' 导出：export default axios
-
引入到 src/login/index.js 中编写业务实现 导入
import myAxios from '../utils/request.js' -
打包
Webpack 搭建开发环境
步骤；
-
下载 webpack-dev-server 软件包到当前项目
npm i webpack-dev-server --save-dev -
配置自定义命令，并设置打包的模式为开发模式
// ... module.exports = { // ... mode: 'development' }"scripts": { // ... "dev": "webpack serve --mode=development" }, - package.josn 下加
"scripts": { // 自动打开浏览器 "dev": " webpack serve --open" }, - 使用 npm run dev 来启动开发服务器
-
// 注意1：webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务
// 注意2：默认以 public 文件夹作为服务器根目录
// 注意3：webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）
Webpack 打包模式
-
如何设置影响 Webpack呢？
-
方式1：在 webpack.config.js 配置文件设置 mode 选项
// ... module.exports = { // ... mode: 'production' } -
方式2：在 package.json 命令行设置 mode 参数
"scripts": { "build": "webpack --mode=production", "dev": "webpack serve --mode=development" },
-
-
注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置
-
体验：在 build 命令后 修改 mode 的值，打包输出观察打包后的 js 文件内容
Webpack 打包模式的应用
步骤：
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 CSS
process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
],
}
],
},Webpack 前端注入环境变量
需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效
-
配置 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) }) ] }
index.js中
if (process.env.NODE_ENV === 'production') {
console.log = function() {}
}
console.log('开发模式下显示，生产模式下失效')
Webpack 开发环境调错 source map
问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
-
设置：webpack.config.js 配置 devtool 选项
// ... module.exports = { // ... devtool: 'inline-source-map' } // 开发环境下使用 sourcemap 选项 if (process.env.NODE_ENV === 'development') { config.devtool = 'inline-source-map' }inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内
-
注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）
Webpack 设置解析别名路径
-
配置解析别名：在 webpack.config.js 中设置
// ... const config = { // ... resolve: { alias: { '@': path.resolve(__dirname, 'src') } } } -
引入目标模块写的路径就更简单了
import { checkPhone, checkCode } from '@/utils/check.js'
优化-CDN使用
步骤：
1.在 html 中引入第三方库的 CDN 地址并用模板语法判断
<% if(htmlWebpackPlugin.options.useCdn){ %>
<% } %>
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'
})
]
}Webpack 多页面打包
步骤：
-
准备源码（html，css，js）放入相应位置，并改用模块化语法导出
-
下载 form-serialize 包并导入到核心代码中使用
-
配置 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'] }) ] } -
重新打包
优化-分割公共代码
步骤：
1.配置 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~模块名2
return `./js/${allChunksNames}` // 输出到 dist 目录下位置
}
}
}
}
2.打包