webpack5打包配置：从青铜到王者的进阶之路，笑出腹肌版！

Hey小伙伴们！今天咱们来聊点技术圈的大事——如何用webpack5打包你的代码，从一脸懵逼到装逼如风。别急着点叉，我保证这篇教程比你的Ex更懂你，比你的代码更幽默！

一、webpack5是谁？它凭啥成为“打包界扛把子”？

想象一下，webpack5就像个全能型健身教练，既能举铁（处理JS），又能瑜伽（处理CSS），还能给你整点HIIT（优化打包）。与Rollup那个“专一深情的技术宅”不同，webpack5是个多功能瑞士军刀，适合搞各种大型项目。

• webpack5：像极了你前任，功能多但复杂，适合搞大型SPA项目。
• Rollup：像你暗恋的学霸，专攻ESM打包，生成代码简洁到让webpack5羞愧难当。

冷知识：Vue、React这些大咖的源码打包用Rollup，但项目构建大多用webpack5！是不是突然觉得它更接地气了？

二、新手村任务：安装webpack5

首先，打开你的终端，深吸一口气，输入这行咒语：

npm install --save-dev webpack webpack-cli

或者，如果你更偏爱yarn（别问我为啥，可能是因为它更绿？）：

yarn add --dev webpack webpack-cli

灵魂拷问：为什么不用npm install webpack？
答：因为--save-dev是开发依赖，就像你的PS5，打游戏必备，但老婆查账单时可以说“这是为了工作！”

三、配置文件：webpack.config.js的诞生

在项目根目录创建个webpack.config.js文件，这货长这样：

const path = require('path');

module.exports = {
   
  entry: './src/main.js', // 入口文件，你的代码起点
  output: {
   
    filename: 'bundle.js', // 出口文件名
    path: path.resolve(__dirname, 'dist'), // 出口路径
    clean: true // 打包前清空dist目录
  },
  module: {
   
    rules: [] // 加载器配置
  },
  plugins: [