构建工具

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

Webpack

使用步骤：

初始化项目 yarn init -y
安装依赖webpack、webpack-cli

-D -- 开发的时候的依赖
webpack-cli 命令行工具

在项目中创建src目录，然后编写代码（index.js）
执行yarn webpack 来对项目进行的打包（打包后）

src文件中，遵循前端的编写规则，src外遵循node编写规则

yarn 安装package.json中的包生成node_modules文件

entry

约定优于配置配置打包入口：可字符串、可数组、可对象

字符串、数组：打包为一个文件对象：打包成多个文件

key: 打包后的文件名
url: 打包的文件地址
{key: "url"}

output

是一个对象

filename：打包后的文件名

entry: {
        a: "./src/a.js", 
        b: "./src/b.js"
},
output: {
    filename: '[name]-[id]-[hash].js'
    }

clean：是否自动清理打包目录
path: 指定打包的目录，必须要绝对路径

const path = require("path")
output: {
    path: path.resolve(__dirname, 'hello'), //指定打包的目录, 必须要绝对路径
    filename: 'main.js', // 打包后的文件名
    clean: true, // 自动清理打包目录
} // 配置代码打包后的地址

loader

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

以css为例： (yarn add css-loader -D、 yarn add -D style-loader)

    - 使用css-loader可以处理js中的央视
    - 使用步骤
        1. 安装： yarn add css-loader -D  // 将css转为js
        3. 配置：
            - yarn add -D style-loader  //负责引用

  module: {
    rules: [{
        test: /\.css$/i,
        use: ["style-loader","css-loader"]  // 从后往前执行
    }]
   }

在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就是我们无法使用一些新的特性。
但是我们现在希望能够使用新的特性。我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将代码转换为旧代码

babel

将新的js语法转换为旧的js，以提高代码的兼容性我们如果希望在webpack支持babel，则需要向webpack中引入babel的loader

使用步骤

安装 npm install -D babel-loader @babel/core @babel/preset-env
- @babel/preset-env 预设，不需要一个一个去引入
配置

  {
    test: /\.m?js$/,  // 以js、mjs结尾的文件
    exclude: /(node_modules|bower_components)/, // 排除
    use: {  // 配置的什么文件
      loader: 'babel-loader',  // 用什么加载器
      options: {
        presets: ['@babel/preset-env'] // 用babel的默认配置
      }
    }
  }

在package.json 中设置兼容性

// 设置默认的兼容性
"browserslist": [
    "defaults"
  ]

插件（plugin）

插件用来为webpack来扩展功能
html-webpack-plugin
- 这个插件可以在打包代码后，自动在打包目录生成html页面
- 使用步骤
  - 安装依赖 yarn add -D html-webpack-plugin
  - 加载插件

// 引入html
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
 plugins: [new HTMLPlugin({
        // title: "Hello Webpack", // 设置index的title
        template: "./src/index.html" // 模板地址
    })]
}

插件不会对源代码进行任何的处理，只是扩展功能，mode、entry、output、loader、bable、plugin会对源代码进行修改

watch

为了不每次修改代码就build一下，可以使用监控 yarn webpack --watch

安装一个开发服务器

自动刷新，用本地地址 yarn add -D webpack-dev-server

使用 yarn webpack serve

自动打开浏览器 yarn webpack serve --open

用webpack serve启动服务的时候，不会创建dist文件，在临时服务器上运行的

devtool

开发工具

把源码和编译后的代码做一个映射，可以在浏览器用源码来进行调试 devtool: "inline-source-map"

代码

webpack.config.js 文件

const path = require("path")
// 引入html
const HTMLPlugin = require('html-webpack-plugin')
module.exports = {
    mode: "development",  // 设置打包的模式，production 表示生成模式， development 是开打模式
    // entry: "./hello/hello.js", // 用来指定打包时的主文件 默认 ./src/index.js
    // entry: ["./src/a.js", "./src/b.js"], 
    // entry: {
    //     a: "./src/a.js", 
    //     b: "./src/b.js"
    // },
    // entry: "./src/a.js", 
    output: {
        // path: path.resolve(__dirname, 'hello'), //指定打包的目录, 必须要绝对路径
        // filename: '[name]-[id]-[hash].js', // 打包后的文件名
        clean: true, // 自动清理打包目录
    }, // 配置代码打包后的地址

    /* webpack 默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader
        - 以css为例：
            - 使用css-loader可以处理js中的央视
            - 使用步骤
                1. 安装： yarn add css-loader -D   // 将css转为js
                2. 配置：
                  module: {
                rules: [{
                    test: /\.css$/i,
                    use: "css-load er"
                }]
            }
            -yarn add -D style-loader 
                - 负责引用
    */
   module: {
    rules: [
        // loader
        {
            test: /\.css$/i,
            use: ["style-loader","css-loader"]  // 从后往前执行
        },
        // babel
        {
            test: /\.m?js$/,  // 以js、mjs结尾的文件
            exclude: /(node_modules|bower_components)/, // 排除
            use: {  // 配置的什么文件
              loader: 'babel-loader',  // 用什么加载器
              options: {
                presets: ['@babel/preset-env'] // 用babel的默认配置
              }
            }
        },
    ]
   },
    // plugin
    plugins: [new HTMLPlugin({
        // title: "Hello Webpack",
        template: "./src/index.html"
    })],
    devtool: "inline-source-map"
}

Vite

也是前端的构建工具
相较于webpack，vite采用了不同的运行方式：
- 开发时，并不对代码打包，而是直接采用ESM的方式来运行项目
- 在项目部署时，再对项目进行打包
除了速度外，vite使用起来也更加方便
默认源码目录是根目录
html文件中：

type="module" => es模块 <script type="module" src="./index.js"></script>

运行

直接启动一个内置服务器，不需要打包和配置

yarn vite 运行开发环境的代码

打包

基本使用：

安装开发依赖 yarn add -D vite
vite源码目录就是项目跟目录
开发命令：
- vite 启动开发服务器
- vite build 打包代码
- vite breview 预览打包后代码

yarn vite build 运行后打开dist文件中的html文件，无效因为es模块必须用url来访问

解决方法：

dist放在服务器中运行
yarn vite preview 命令执行的是dist文件中的代码

yarn vite preview 与 yarn vite的区别

yarn vite preview 命令执行的是dist文件中的代码
yarn vite 运行开发环境的代码

yarn create vite

快速构建项目

vite.config.js

用的es6的模块化模板

import { defineConfig } from "vite"; // 引入vite提示

export default defineConfig({
   
})

js兼容就版本

yarn add -D @vitejs/plugin-legacy // 需要加载压缩代码工具

yarn add -D terser 压缩代码工具

代码

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy"

export default defineConfig({
    plugins: [
        legacy()
        //  legacy({
        //    targets: ["defaults", "ie 11"]
        //})
    ]
})

webpack && vite