如何将Laravel Mix Webpack配置转换为Bun Bundler配置

1. 安装依赖 #

首先安装Bun编译所需的工具包：

bun add -D sass tailwindcss postcss autoprefixer

如果还未初始化Tailwind配置，执行：

bunx tailwindcss init -p

2. 创建Bun配置文件 #

在项目根目录创建bun.config.ts（或.js），内容如下：

export default {
  // 对应原Mix的alias配置
  alias: {
    "@app1": "./resources/app1/src",
    "@app2": "./resources/app2/src",
  },

  // 构建核心配置
  build: {
    // 多入口配置，对应原Mix的.ts()和.sass()打包
    entry: {
      "js/app1": "./resources/app1/src/index.tsx",
      "js/app2": "./resources/app2/src/index.tsx",
      "css/app1": "./resources/astnext/src/styles/app1.scss",
      "css/app2": "./resources/astnext/src/styles/app2.scss",
    },
    // 输出目录对应原Mix的默认public目录
    outdir: "./public",
    // 生产环境自动添加哈希值，对应原Mix的.version()
    entryNames: process.env.NODE_ENV === "production" ? "[dir]/[name].[hash]" : "[dir]/[name]",
    // 生产环境关闭sourcemap，对应原Mix的sourceMaps(false)
    sourcemap: process.env.NODE_ENV === "production" ? false : "inline",

    // CSS处理配置
    css: {
      // 禁用CSS中url()的处理，对应原Mix的processCssUrls: false
      url: false,
      // PostCSS配置，引入Tailwind
      postcss: {
        plugins: [require("tailwindcss"), require("autoprefixer")],
      },
    },

    // Bun原生支持React/TSX，无需额外插件
    target: "browser",
  },
};

3. 添加npm脚本 #

在package.json中添加构建脚本：

{
  "scripts": {
    "build": "bun run build",
    "build:prod": "NODE_ENV=production bun run build"
  }
}

关键对应说明 #

• 别名配置：直接通过Bun配置的alias字段实现，和Laravel Mix的.alias()完全对应。
• TSX/React打包：Bun原生支持TypeScript、JSX和React，无需额外安装loader或插件，直接指定入口即可。
• Sass编译：安装sass后Bun自动处理.scss文件，css.url: false等价于Laravel Mix的processCssUrls: false，PostCSS配置直接引入Tailwind。
• 生产环境优化：通过NODE_ENV=production触发生产模式，Bun自动生成带哈希的文件名（对应.version()），同时关闭sourcemap。

内容的提问来源于stack exchange，提问作者Vectrobyte