前端构建工具（webpack&vite）

这里写目录标题

构建工具
- webpack介绍
vite

构建工具

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

webpack介绍

src 是把所有的源码放在了这个src 里面。

我们使用打包工具的前提是这个项目得是一个node项目，所以我们在使用webpack要先把项目初始一下 yarn init -y ,会出现一个package.json,初始化就完事了。然后就安装依赖 yarn add -D webpack webpack-cli . -D表示的是开发依赖，区分一下是开发的时候要用的还是运行的时候要用的。然后再项目中创建src 目录，然后编写代码，index.js是默认主目录，是入口文件。然后执行''yarn webpack 来对代码进行打包，打包好观察dist目录。dist目录就是打包后的版本。dist目录里有个main.js，就是打包后的代码，index.js是源码。webpack-cli 是命令行工具，没有安装不能用yarn webpack打包。

配置文件简介

webpack.config.js是给node.js看的，所以要遵循node的模块化规范。怎么区分，src 以内的遵循前端规则，src以外的遵循node的开发规范。

entry

entry 是用来指定打包时的主文件（入口文件）默认是 ./src/index.js。一般不改。

output

loader

webpack默认情况下,只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为期引入loader。loader 让 webpack 能够去处理其他类型的文件（默认只能处理js文件），并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

使用步骤：

1.安装对应的loader： yarn add css-loader style-loader -D .

2.配置方式：

css-loader 只负责打包，style-loader 负责渲染生效【单一职责原则】

loader 执行顺序为从后向前执行，因此use的数组顺序不能调换

babel

在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性。

使用步骤

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

2.配置

javascript 复制代码

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

3.在package.json中设置兼容列表