构建工具 | 乞力马扎罗的雪

当我们习惯在node中编写代码的方式后，再回到html，css，js的编写中会感到各种不适应
通过构建工具能将使用ESM编写规范的代码转换为旧的JS语法，这样可以使得所有的浏览器都支持代码

Webpack

使用步骤：
1. 初始化项目yarn init -y
2. 安装依赖webpack、webpack-cli
3. 在项目中创建src目录，然后编写代码（index.js）
4. 执行yarn webpack来对代码进行打包（打包后观察 dist 目录）

配置文件（webpack.config.js）

const path = require("path")
module.exports = {
    mode: "production", //  设置打包的模式，production表示生产模式，development表示开发模式
    entry: "./src/index.js",    //  用来指定打包时的主文件，默认 ./src/index.js
    output: {
        filename: '',   //  打包后的文件名
        clear: true
    }, 
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

loader

webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader

以css为例

使用css-loader可以处理js中的样式

使用步骤

安装：yarn add css-loader -D

配置：

//  在webpack.config.js中配置
module:{
        rules:[
            {
                test:/\.css$/i,
                use: ["style-loader","css-loader"]  // loader的执行顺序时从后往前执行
            },
            {
                test:/\.jpg$/i,
                type:"asset/resource"   //  图片直接资源类型的数据，可以通过指定type来处理
            }
        ]
    }

bable

在编写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"
 ]
```
https://github.com/browserslist/browserslist

插件（plugin）

插件用来为webpack来扩展功能

html-webpack-plugin

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

使用步骤：

安装依赖

npm install --save-dev html-webpack-plugin

配置插件

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

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

- 安装：
  - `yarn add  -D webpack-dev-server`
  - 启动：`yarn webpack serve --open`

devtool:"inline-source-map"配置源码的映射

Vite

Vite也是前端的构建工具
相较于web pack，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​

loader​

bable​

插件（plugin）​

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

Vite​

Webpack

loader

bable

插件（plugin）

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

Vite