前端构建工具其配置过程

前端构建工具（如Webpack、Rollup等）其配置过程。

前端构建工具，如Webpack和Rollup，是用于管理和优化前端项目模块化结构的工具。它们的主要任务是打包代码，压缩资源，处理依赖，以及实现模块化的开发流程。下面是Webpack和Rollup配置过程的一般概述：

Webpack配置:

初始化：首先，安装Webpack及其必要插件，如webpack, webpack-cli, 和 webpack-configurator等。
创建配置文件：通常使用.webpackrc.js或webpack.config.js创建配置文件，定义输出目录、入口点、输出规则、模块加载器等。
入口和出口：设置入口点，即JavaScript或CSS文件开始的地方，Webpack将从这里开始构建。
规则和加载器：定义模块规则，如处理不同类型的文件（.js, .ts, .scss等），可能还需要配置加载器来转换这些文件（如ES6转ES5，图片压缩等）。
优化选项：例如，开启压缩、tree shaking（删除未使用的代码）、split chunks（按需拆分代码块）等。
热更新配置：如果需要实时编译更新，可以设置热模块替换（HMR）。

Rollup配置:

安装：安装Rollup及其插件，如rollup, rollup-plugin-node-resolve, 和 rollup-plugin-commonjs等。
创建配置文件：rollup.config.js或.rolluprc.js，配置打包目标、输入源文件和输出路径。
写入插件：根据项目需求添加功能，比如处理ES6+语法、导入导出管理、体积优化等。
外部依赖处理：使用external属性或resolve选项指定外部库，不将其打包进bundle。
代码分割：通过rollup-plugin-code-splitting来按需加载部分模块。
打包优化：使用 terser 或 vite-plugin-terser进行代码压缩