二四(Node3)、Webpack打包、开发服务器dev、开发模式 生产模式、解析别名路径

1. Webpack 简介与体验

/* 
  使用 Webpack

  需求：封装 utils 包，校验用户名和密码长度，在 index.js 中使用，使用 Webpack 打包
  步骤：
  1. 新建项目文件夹，初始化包环境，得到 package.json 文件
      npm init -y
  2. 新建 src 源代码文件夹（书写代码）
  3. 下载 webpack webpack-cli 到项目（版本独立）
      npm i webpack webpack-cli --save-dev
  4. 项目中运行工具命令，采用自定义命令的方式（局部命令）
      npm run build
  5. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）


  1. Webpack 有什么用？
    ➢ 压缩，转译，整合，打包我们的静态模块
  2. Webpack 怎么用？
    ➢ 初始化环境，编写代码
    ➢ 安装，配置自定义命令
    ➢ 打包体验
  3. 如何运行 package.json 里的自定义命令？
    ➢ npm run 自定义命令
  4. Webpack 默认入口和出口？
    ➢ src/index.js 和 dist/main.js
*/

2. 自动生成 html 文件

插件 html-webpack-plugin

// 1. 插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源
// 2. 步骤：
//   2.1 下载 html-webpack-plugin 本地软件包到项目中
//       npm i html-webpack-plugin --save-dev
//   2.2 配置 webpack.config.js 让 Webpack 拥有插件功能
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 插件列表
  plugins: [
    new HtmlWebpackPlugin({
      // 以指定的 html 文件作为生成模板
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
};
//   2.3 指定以 public/index.html 为模板复制到 dist/index.html，并自动引入其他打包后资源
// 3. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

3. 打包 css 代码

/* 
  Webpack 默认只识别 JS 和 JSON 文件内容，
  所以想要让 Webpack 识别更多不同内容，需要使用加载器

  css-loader style-loader 这2个加载器来辅助 Webpack 才能打包 css 代码

  加载器的作用：让 Webpack 识别更多的代码内容类型
*/

// 1. 准备 css 文件引入到 src/mian.js 中（压缩转译处理等）
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: [
      {
        // 匹配 .css 结尾的文件
        test: /\.css$/i,
        // 使用从后到前的加载器来解析 css 代码和插入到 DOM
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
// 4. 打包后运行 dist/index.html 观察效果，看看准备好的样式是否作用在网页上

4. 打包 less 代码

// ! 打包 less
// 1. 准备 less 样式引入到 src/main.js 中
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",
        ],
      },
    ],
  },
};

// 4. 打包后运行 dist/index.html 观察效果

5. 打包图片

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

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

// 2. 在 index.less 中给 body 添加背景图
/* body{
  background: url(../assets/background.png);
} */

// 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,
        // 根据文件大小（8KB）小于：把文件转成 base64 打包进 js 文件中（减少网络请求次数）大于：文件复制到输出的目录下
        type: "asset",
        // 输出文件时，路径+名字
        generator: {
          filename: "assets/[hash][ext]",
        },
      },
    ],
  },
};
// 5. 打包后运行 dist/index.html 观察效果

6. 集成 babel 编译器

// ! Webpack 集成 babel 编译器
// babel 编译器的作用: 把 ECMAScript2015+ 语法向后转换，兼容低版本浏览器

// 1. 编写一段映射数组元素，每个数值 + 1 的代码（要求用箭头函数）
// 目标：让 Webpack + Babel 编译降级 JS 语法
const arr = [1, 2, 3];
const result = arr.map((val) => val + 1);
console.log(result);

// 2. 下载 babel babel-loader core 本地软件包
// npm i babel-loader @babel/core @babel/preset-env -D

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

// 4. 打包运行 dist/index.html 观察效果

7. Webpack 开发服务器

// ! Webpack 开发服务器 webpack-dev-server
// 启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

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

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

// 3. 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，
// 在浏览器访问打包后的项目网页，修改代码后试试热更新效果
// 在 js / css 文件中修改代码保存后，会实时反馈到浏览器

8. Webpack 打包模式

// ! Webpack 打包模式
// 开发模式	development	调试代码，实时加载，模块热替换等
// 生产模式	production	压缩代码，资源优化，更轻量等
/* 
  开发模式注重代码热替换更快，让开发调试代码更便捷，
  生产模式注重项目体积更小，更轻量，适配不同的浏览器环境
*/

9. 调试代码 source map

// ! Webpack 开发环境调错 source map
// source map: 准确追踪 error 和 warning 在原始代码的位置
// webpack.config.js 配置 devtool 选项
module.exports = {
  // inline-source-map -- 把源码的位置信息一起打包在 JS 文件内
  devtool: "inline-source-map",
};

// source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

10. 解析别名路径

// ! Webpack 设置解析别名路径
// 创建 import 或 require 的别名，来确保模块引入变得更简单
// 1. 原来路径如下：
import { checkUsername, checkPassword } from "../src/utils/check.js";

// 2. 配置解析别名：在 webpack.config.js 中设置
module.exports = {
  resolve: {
    alias: {
      MyUtils: path.resolve(__dirname, "src/utils"),
      "@": path.resolve(__dirname, "src"),
    },
  },
};

// 3. 引入目标模块写的路径变简单了
import { checkUsername, checkPassword } from "MyUtils/check.js";
import { checkUsername, checkPassword } from "@/utils/check.js";