Webpack

当我们习惯了在 node 中编写代码的方式后，在回到前端编写 HTML、css、js 这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范（浏览器兼容性问题）、即使可以使用模块化规范也会面临模块过多时的加载问题。
我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。减少文件数量，浏览器请求数量也会降低，进而提高渲染速度。
构建工具就起到这样一个作用，通过构建工具可以将使用 ESM 规范编写的代码转换为旧的 JS 语法，这样可以使得所有的浏览器都可以支持代码。

使用步骤：

初始化项目yarn init -y，yarn也是管理node项目的工具，与npm相对应
安装依赖webpack（构建webpack的核心工具）、webpack-cli（用于在命令行使用webpack）。命令：yarn add -D webpack webpack-cli，—D表示开发依赖。[1]
在项目中创建src目录，然后编写代码（index.js）
执行yarn webpack来对代码进行打包（打包后观察 dist 目录）

因为安装了webpack-cli，所以可以在命令行使用上述代码。

注意事项

每次在新终端上，输入命令：yarn

每次在新的终端上运行 yarn 命令时，它会根据 package.json 和 yarn.lock 文件中的依赖关系，自动安装所需的依赖包，并且可以保证依赖包的版本和安装位置等信息与之前保持一致，从而保证项目的稳定性和可重复性。

配置文件（webpack.config.js）

官方中文文档：入口起点(entry points) | webpack 中文文档 (docschina.org)

在指南章节有更加详细的信息。

 const path = require("path")
 module.exports = {
     mode: "production",
     entry: "./src/index.js",
     output: {},
     module: {
         rules: [
             {
                 test: /.css$/i,
                 use: ["style-loader", "css-loader"]
             }
         ]
     }
 }

Loader

默认webpack仅能打包js文件，使用Loader可以是webpack打包其他文件，例如：css文件，图片等。

Babel

新语法转为旧语法用于旧浏览器，提高兼容性。

在编写 js 代码时，经常需要使用一些 js 中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。
但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。
babel 就是这样一个工具，可以将新的 js 语法转换为旧的 js，以提高代码的兼容性。
我们如果希望在 webpack 支持 babel，则需要向 webpack 中引入 babel 的 loader

使用步骤

安装 npm install -D babel-loader @babel/core @babel/preset-env

配置：

 module: {
     rules: [
         {
             test: /.m?js$/,
             exclude: /(node_modules|bower_components)/,
             use: {
                 loader: "babel-loader",
                 options: {
                     presets: ["@babel/preset-env"]
                 }
             }
         }
     ]
 }

在 package.json 中设置兼容列表

 "browserslist": [
         "defaults"
  ]

github.com/browserslis…

插件（plugin）

插件(Plugins) | webpack 中文文档 (docschina.org)

webpack 中文文档 (docschina.org)-plugins相关的插件使用介绍

插件用来为 webpack 来扩展功能

注意：loader是用来扩展处理文件的功能，会对代码进行额外的编译操作。

HTML-webpack-plugin

这个插件可以在打包代码后，自动在打包目录生成 HTML 页面

使用步骤：

安装依赖
配置插件

 plugins: [
     new HTMLPlugin({
         // title: "Hello Webpack",
         template: "./src/index.HTML"
     })
 ]

开发服务器（webpack-dev-server）

安装：
- yarn add -D webpack-dev-server
启动：yarn webpack serve --open，--open表示自动在浏览器中打开

注意这个包的功能是将代码在服务器自动打包因此在自己生成dist的时候要使用：yarn build来生成dist

开发模式配合source-map

两种模式[2]

devtool:"inline-source-map"配置源码的映射，也就是在开发阶段，使用development，配合上述源码映射，就可以在浏览器的中看到源码并进行调试。

Vite

Vite 也是前端的构建工具
相较于 webpack，vite 采用了不同的运行方式：
- 开发时，并不对代码打包，而是直接采用 ESM 的方式来运行项目
- 在项目部署时，在对项目进行打包
除了速度外，vite 使用起来也更加方便
基本使用：
1. 安装开发依赖 vite
2. vite 的源码目录就是项目根目录
3. 开发命令：
  
  vite 启动开发服务器
  
  vite build 打包代码
  
  vite preview 预览打包后代码

使用命令构建

 npm create vite@latest
 yarn create vite
 pnpm create vite

配置文件：vite.config.js

格式：

 import { defineConfig } from "vite"
 import legacy from "@vitejs/plugin-legacy"
 
 export default defineConfig({
     plugins: [
         legacy({
             targets: ["defaults"]
         })
     ]
 })

Webpack | 青训营

Webpack

使用步骤：

配置文件（webpack.config.js）

Babel

插件（plugin）

开发服务器（webpack-dev-server）

开发模式配合source-map

相关注释

Vite