Webpack是一款十分流行的JavaScript模块打包工具，它能够将你的JavaScript代码及其依赖打包成一个或多个JavaScript文件，方便在浏览器中使用。
Webpack的基本用法如下：
npm install webpack webpack-cli --save-dev这个命令会将Webpack及其命令行工具安装到你的项目下，并将其添加到开发环境依赖中。
接下来，你需要创建一个Webpack的配置文件，通常命名为webpack.config.js。该文件应该导出一个配置对象，用于指定Webpack的行为，例如入口文件、输出文件、模块解析规则、插件等等。以下是一个简单的Webpack配置文件的示例：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ test: /.js$/, exclude: /node_modules/, use: 'babel-loader' }
]
},
plugins: [
// 插件配置
]
};
在该配置文件中，我们指定了入口文件为src/index.js，输出文件为dist/bundle.js，同时配置了一个Babel Loader用于将ES6语法转换为ES5语法。
最后，你可以在命令行中使用webpack命令来执行打包操作：
webpack --config webpack.config.jsWebpack会根据你的配置文件进行打包，并将输出文件保存到dist目录下。
Rollup是另一款流行的JavaScript模块打包工具，它的主要特点是可以将你的代码打包成ES6模块，并使用Tree Shaking技术去除未使用的代码，从而生成更小的输出文件。
Rollup的基本用法如下：
npm install rollup --save-dev这个命令会将Rollup安装到你的项目下，并将其添加到开发环境依赖中。
接下来，你需要创建一个Rollup的配置文件，通常命名为rollup.config.js。该文件应该导出一个配置对象，用于指定Rollup的行为，例如入口文件、输出文件、模块解析规则、插件等等。以下是一个简单的Rollup配置文件的示例：
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [
// 插件配置
]
};在该配置文件中，我们指定了入口文件为src/index.js，输出文件为dist/bundle.js，同时配置了一个ES6模块输出格式。
最后，你可以在命令行中使用rollup命令来执行打包操作：
rollup -c rollup.config.jsRollup会根据你的配置文件进行打包，并将输出文件保存到dist目录下。