Node.js day-03

01 Webpack讲解

Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

2.静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件

3.打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

4.Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

把 less/sass 转成 css 代码
把 ES6+ 降级成 ES5 等
支持多种模块文件类型，多种模块标准语法

02.修改 Webpack 打包入口和出口

步骤：

项目根目录，新建 Webpack.config.js 配置文件

导出配置对象，配置入口，出口文件路径

const path = require('path')

module.exports = {entry: path.resolve(__dirname, 'src/main.js'), // 入口output: { // 出口path: path.resolve(__dirname, 'dist'),filename: 'app.js',clean: true // 先清空 dist，然后再输出最新内容}
}

03.Webpack 自动生成 html 文件

Webpac插件讲解地址

步骤：

1.下载 html-webpack-plugin 本地软件包到项目中

npm i html-webpack-plugin --save-dev

2.配置 webpack.config.js 让 Webpack 拥有插件功能
// ...
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// ...plugins: [ // 插件列表new HtmlWebpackPlugin({template: path.resolve(__dirname, 'public/index.html') // 以指定的 html 文件作为生成模板})]
};
3.指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源

04.Webpack-打包 css 代码

讲解：

注意：Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器
介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码
- 加载器 css-loader：解析 css 代码
- 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

步骤：

1.准备 css 文件引入到 src/mian.js 中（压缩转译处理等）
/*** 目标：引入 css 文件内容*/
import './css/index.css'
2.下载 css-loader 和 style-loader 本地软件包

npm i css-loader style-loader --save-dev

3.配置 webpack.config.js 让 Webpack 拥有该加载器功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表{test: /\.css$/i, // 匹配 .css 结尾的文件use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM}]}
};

05. Webpack-打包 less 代码

步骤：

1.准备 less 样式引入到 src/main.js 中
/*** 目标：引入 less 文件内容*/
import '@/less/index.less'
2.下载 less 和 less-loader 本地软件包

npm i less less-loader --save-dev

3.配置 webpack.config.js 让 Webpack 拥有功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{test: /\.less$/i,use: [// compiles Less to CSS'style-loader','css-loader','less-loader',],},]}
};

06.Webpack-打包图片

步骤：

1.准备图片素材到 src/assets 中（存放资源模块 - 图片/字体图标等）

2.在 index.less 中给 body 添加背景图
body{background: url(../assets/background.png) no-repeat center center;
}
3.在 main.js 中给 img 标签添加 logo 图片
/*** 目标：要给 img 标签设置一个 logo 图片* 注意：再赋予给 img 的 src 属性图片的时候，需要把图片数据对象引入过来*/
import imgObj from '@/assets/logo.png'
document.querySelector('.logo-img').src = imgObj
4.配置 webpack.config.js 让 Webpack 拥有打包图片功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{ // 针对资源模块（图片，字体文件，图标文件等）处理test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset', // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下generator: { // 输出文件时，路径+名字filename: 'assets/[hash][ext]'}}]}
};
注意：

小于 8KB 文件会被转成 data URI（base64 字符串）打包进 JS 文件中（好处：可以减少网络请求次数，缺点：增加 30% 体积）
大于 8KB 文件会被复制到 dist 下，自动替换使用代码的图片名字

07.Webpack 集成 babel 编译器（降级处理）

步骤：

1.下载 babel babel-loader core 本地软件包

npm i babel-loader @babel/core @babel/preset-env -D

2.配置 webpack.config.js 让 Webpack 拥有功能
// ...module.exports = {// ...module: { // 加载器rules: [ // 规则列表// ...{test: /\.m?js$/,exclude: /(node_modules|bower_components)/, // 排除指定目录里的 js （不进行编译降级）use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env'] // 预设规则}}}],}
};

08.案例-注册用户-完成功能

步骤：

1.使用 npm 下载 axios

npm i axios

2.引入axios

import axios from "axios"

09.Webpack 开发服务器

每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器
作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

步骤：

1.下载 webpack-dev-server 软件包到当前项目

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

2.配置自定义命令，并设置打包的模式为开发模式
"scripts": {// ..."dev":"webpack serve  --mode=development"},

10.Webpack 打包模式

11.Webpack 开发环境调错 source map

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）
设置：webpack.config.js 配置 devtool 选项

12.Webpack 设置解析别名路径

例如：

1.原来的路径如下：
import { checkUsername,  checkPassword } from '../src/utils/check.js'
2.配置解析别名：在 webpack.config.js 中设置

3.修改后
import { checkPassword } from "@/utlis/check.js";