Node.js day-03 - 技术栈

01 Webpack讲解

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

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

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

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

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

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

步骤：

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

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

javascript 复制代码

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 拥有插件功能
javascript 复制代码
// ...
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 中（压缩转译处理等）
javascript 复制代码
/**
 * 目标：引入 css 文件内容
 */
import './css/index.css'
2.下载 css-loader 和 style-loader 本地软件包

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

3.配置 webpack.config.js 让 Webpack 拥有该加载器功能
javascript 复制代码
// ...

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

05. Webpack-打包 less 代码

步骤：

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

npm i less less-loader --save-dev

3.配置 webpack.config.js 让 Webpack 拥有功能
javascript 复制代码
// ...

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 添加背景图
javascript 复制代码
body{
  background: url(../assets/background.png) no-repeat center center;
}
3.在 main.js 中给 img 标签添加 logo 图片
javascript 复制代码
/**
 * 目标：要给 img 标签设置一个 logo 图片
 * 注意：再赋予给 img 的 src 属性图片的时候，需要把图片数据对象引入过来
 */
import imgObj from '@/assets/logo.png'
document.querySelector('.logo-img').src = imgObj
4.配置 webpack.config.js 让 Webpack 拥有打包图片功能
javascript 复制代码
// ...

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 拥有功能

javascript 复制代码

// ...

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.配置自定义命令，并设置打包的模式为开发模式
javascript 复制代码
"scripts": {
    // ...
    "dev":"webpack serve  --mode=development"
  },

10.Webpack 打包模式

11.Webpack 开发环境调错 source map

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

12.Webpack 设置解析别名路径

例如：

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

3.修改后
javascript 复制代码
import { checkPassword } from "@/utlis/check.js";