手把手教你完成构建工具配置步骤，开发效率翻倍

为什么需要构建工具

写前端代码的时候，你是不是也遇到过这样的情况：改了一个样式，要手动刷新浏览器；图片没压缩，页面加载慢得像蜗牛；代码文件越来越多，根本分不清哪个是主文件。这时候，构建工具就派上用场了。

Webpack、Vite、Rollup 这些工具能帮你自动打包、压缩、转译代码，还能监听文件变化实时预览。但很多人卡在第一步——配置不会弄。其实只要走对步骤，配置没那么难。

构建工具配置基本流程

以 Vite 为例，它现在是很多人的首选，因为配置简单，启动飞快。先通过 npm 创建项目：

npm create vite@latest my-project --template vanilla

进入目录安装依赖：

cd my-project
npm install

这时候项目里会多出一个 vite.config.js 文件，这就是核心配置文件。最基础的配置长这样：

export default {
  root: 'src', // 指定源码目录
  server: {
    port: 3000,
    open: true // 启动时自动打开浏览器
  },
  build: {
    outDir: 'dist' // 打包输出目录
  }
}

添加插件支持更多功能

如果想用 jQuery 或者引入 CSS 预处理器，光靠默认配置不够。比如要用 Sass，先装依赖：

npm install -D sass

Vite 原生支持 Sass，不用额外配 loader，直接在 CSS 文件里写 .scss 就行。但如果要兼容旧浏览器，就得加个插件：

npm install -D @vitejs/plugin-legacy

然后在配置文件里引入：

import legacy from '@vitejs/plugin-legacy';

export default {
  plugins: [
    legacy({
      targets: ['>= 1%', 'not dead']
    })
  ]
}

自定义别名让路径更清晰

项目一大，文件夹层级深， import 路径动不动就是 ../../utils/helper，看着头晕。可以在配置里加个别名：

import { resolve } from 'path';

export default {
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
}

之后就能写 import { api } from '@/services/api'，清爽多了。

配置不是一蹴而就的事。刚开始可以照着模板抄，等项目跑起来再一点点调整。真正用起来才发现哪些地方卡脖子，改起来也更有方向。”}