npm
定义：npm是Node.js标准的软件包管理器。它起初是作为下载和管理Node.js包依赖的方式，但其现在也已成为前端JavaScript中使用的工具。
包
包：将模块、代码、其他资料聚合成一个文件夹
包的分类：
- 项目包：主要用于编写项目和业务逻辑
- 软件包：封装工具和方法进行使用
要求：根目录中，必须有package.json文件（记录包的清单信息）
注意：导入软件包时，引入的默认时index.js模块文件 / main属性指定的模块文件
npm - 软件包管理器
使用：
- 初始化清单文件：npm init -y (得到package.json文件，有则略过此命令)
- 下载软件包：npm i 软件包名称
- 使用软件包
package-lock.json文件的作用是固定软件包版本。
npm - 安装所有依赖
- 项目中不含node_modules，不能正常运行，因为缺少依赖本地的软件包，自己用npm下载依赖比磁盘传递拷贝快得多。
- 项目终端输入命令
npm i可以下载package.json中记录的所有软件包。
npm - 全局软件包nodemon
软件包区别：
- 本地软件包：当前项目内使用，封装属性和方法，存在于node_modules
- 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置
nodemon作用：替代node命令，检测代码更改，自动重启程序。
使用：
- 安装：
npm i nodemon -g（ -g 代表安装到全局环境中） - 运行：
nodemon 待执行的目标js文件
Webpack
定义：一个用于现代JavaScript应用程序的静态模块打包工具。
- 静态模块：指的是编写代码过程中的html、css、js、图片等固定内容的文件
- 打包：把静态模块内容压缩、整合、转译等（前端工程化）
- 把less / sass转成css代码
- 把ES6+降级成ES5
- 支持多种模块标准语法
使用Webpack
需求：封装utils包，校验手机号长度和验证码长度，在src/index.js中使用并打包观察。
步骤：
- 新建并初始化项目，编写业务源代码
- 下载webpack webpack-cli到当前项目中（版本独立），并配置局部自定义命令
- 运行打包命令，自动产生dist分发文件夹（压缩和优化后，用于最终运行的代码）
修改Webpack打包入口和出口
Webpack配置：影响Webpack打包过程和结果。
步骤：
- 项目根目录，新建webpack.config.js配置
- 导出配置对象，配置入口、出口文件的路径
- 重新打包观察
注意：只有和入口产生直接/间接的引入关系，才会被打包
自动生成html文件
插件html-webpack-plugin：在Webpack打包时生成html文件。
步骤：
-
下载html-webpack-plugin本地软件包
npm i html-webpack-plugin --save-dev -
配置webpack.config.js让Webpack拥有插件功能
-
重新打包观察效果
打包CSS代码
注意：Webpack默认只识别js代码
加载器css-loader：解析css代码
加载器style-loader：把解析后的css代码插入到DOM
步骤：
-
准备css文件代码引入到src/login/index.js中（压缩转译处理等）
-
下载css-loader和style-loader本地软件包
npm i css-loader style-loader --save-dev -
配置webpack.config.js让Webpack拥有该加载器功能
module.exports = { module: { rules: [ { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, ], }, };
优化 - 提取css代码
插件mini-css-extract-plugin：提取css代码。
好处：css文件可以被浏览器缓存，减少js文件体积
注意：不能和style-loader一起使用，需要Webpack5才能正常工作
步骤：
-
下载mini-css-extract-plugin本地软件包
npm install --save-dev mini-css-extract-plugin -
配置webpack.config.js让Webpack拥有该插件功能
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, }; -
打包后观察效果
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
};
优化 - 压缩过程
使用css-minimizer-webpack-plugin插件可以解决css代码提取后没有压缩的问题。
步骤：
-
下载cs-minimizer-webpack-plugin本地软件包
npm install 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(), ], }, plugins: [new MiniCssExtractPlugin()], }; -
打包重新观察
打包less代码
加载器less-loader：把less代码编译位css代码。
注意：less-loader需要配合less软件包使用，如果既有css文件又有less文件，需要关闭vscode里的easy 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: [ // compiles Less to CSS 'style-loader', 'css-loader', 'less-loader', ], }, ], }, };
打包图片
资源模块：Webpack5内置资源模块（字体、图片等）打包，无需额外loader。
注意：判断临界值默认位8KB
- 大于8KB的文件：发送一个单独的文件并导出URL地址
- 小于8KB的文件：导出一个data URI（base64字符串）
步骤：
-
配置webpack.config.js让Webpack拥有打包图片功能。
-
占位符 [hash] 对模块内容做算法计算，得到映射的数字字母组合的字符串
-
占位符 [ext] 使用当前模块原本的占位符，例如：.png / .jpg 等字符串
-
占位符 [query] 保留引入文件时代码中的查询参数（只有URL下生效
-
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
type: 'asset',
generator: {
filename: 'assets/[hash][ext][query]'
}
},
]
},
}
搭建开发环境
问题：之前改代码，需要重新打包才能运行查看，效率很低。
开发环境：配置webpack-dev-server快速开发应用程序。
作用：启动Web服务，自动检测代码变化，热更新到网页。
注意：dist目录和打包内容是在内存里（更新快）
步骤：
-
下载webpack-dev-server软件包到当前项目
npm i webpack-dev-server --save-dev -
设置模式位开发模式
module.exports = { mode: 'development' }，并配置自定义命令"scripts: { "build": "webpack", "dev": "webpack serve --open"} -
使用
npm run dev来启动开发服务器
注意：
webpack-dev-server借助http模块创建8080默认Web服务- 默认以public文件夹作为服务器根目录
- webpack-dev-server根据配置
打包模式
打包模式：告知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" },
-
注意：命令行设置的优先级高于配置文件的，推荐命令行设置。
打包模式的应用
需求：在开发模式下用style-loader内嵌更快，在生产模式下提取css代码
方案一：webpack.config.js配置导出函数，但是局限性大（只接受2种模式）
方案二：借助corss-env（跨平台通用）包命令，设置参数区分环境
-
步骤：
-
下载cross-env软件包到当前项目
npm i cross-env --save-dev -
配置自定义命令，传入参数名和值（会绑定到process.env对象下）
-
"scripts": { "test": "echo \"Error: no test speckfied\" && exit 1", "build": "cross-env webpack --mode=development", "dev": "cross-env NODE_ENV=develogment webpack serve --open --mode=development" },
-
-
在webpack.config.js区分不同环境使用不同配置
-
重新打包观察
-
方案3：配置不同的webpack.config.js（适用多种模式差异性较大情况）
Webpack向前端注入环境变量
需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效。
问题：cross-env设置的只在Node.js环境生效，前端代码无法访问process.env.NODE_ENV
解决：使用Webpack内置的DefinePlugin插件。
作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式。
开发环境调错 - source map
问题：代码被压缩和混肴，无法正确定位源代码位置（行数和列数）
source map：可以准确追踪error和warning在原始代码的位置。
设置：webpack.config.js配置devtool选项。
module.exports = {
devtool: 'inline-source-map'
};
inline-source-map选项：把源码的位置信息一起打包在js文件内。
注意：source map仅适用于开发环境，不要在生产环境使用（防止被轻易查看源代码位置）
Webpack解析别名
解析别名：配置模块如何解析，创建import引入路径的别名，来确保模块引入变得简单。
例如：原来路径比较长而且相对路径不安全。
举例：
配置前：import {checkPhone, checkCode} from '../src/utils/check.js'
配置webpack.config.js：
const config = {
resolve: {
alias:{
'@': path.resolve(__dirname, 'src')
}
}
}
配置后：import {checkPhone, checkCode} from '@/utils/check.js'
优化 - CDN使用
CDN定义：内容分发网络，指的是一组分布在各个地区的服务器。
作用：把静态资源文件/第三方库放在CDN网络中各个服务器中，共用户就近请求获取。
好处：减轻自己服务器的请求压力，就近请求物理延迟低，配套缓存策略。
需求：开发模式使用本地第三方库，生产模式下使用CDN加载引入
步骤：
- 在html中引入第三方库的CDN地址并用模板语法判断
- 配置webpack.config.js中externals外部扩展选项（防止某些import的包被打包）
- 两种模式下的打包观察效果
多页面打包
单页面：单个html文件，切换DOM的方式实现不同的业务逻辑展示，后续Vue/React会学到
多页面：多个html文件，切换页面实现不同业务逻辑展示
步骤：
- 准备源码（html、css、js）放入相应位置，并改用模块化语法导出。
- 下载form-serialize包并导入到核心代码中使用
- 配置webpack.config.js多入口和多页面的设置
- 重新打包观察效果
扫一扫
690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
