vite.config.ts webpack.config.js vue.config.js 介绍一下3个文件

vite.config.ts、webpack.config.js 和 vue.config.js 都是前端项目中用于配置构建工具和开发环境的重要文件，下面为你详细介绍它们：

1. vite.config.ts

简介

vite.config.ts 是 Vite 构建工具的配置文件，Vite 是一种新型的前端构建工具，具有快速冷启动、即时热更新等特性。该文件可以使用 TypeScript 编写，因为 Vite 原生支持 TypeScript 配置文件。

常见配置项及用途

• server：用于配置开发服务器，例如设置端口号、代理等。

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

• resolve：配置路径别名，方便在代码中引用模块。

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

• plugins：使用 Vite 插件来扩展功能，如 Vue 3 插件、ESLint 插件等。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

2. webpack.config.js

简介

webpack.config.js 是 Webpack 构建工具的配置文件，Webpack 是一个强大的模块打包工具，能够处理各种类型的模块资源，如 JavaScript、CSS、图片等，并将它们打包成一个或多个文件。

常见配置项及用途

• entry：指定 Webpack 打包的入口文件。

const path = require('path')

module.exports = {
  entry: './src/index.js'
}

• output：配置打包输出的文件路径和文件名。

const path = require('path')

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

• module.rules：配置不同类型文件的加载器，如处理 CSS 的 style-loader 和 css-loader，处理图片的 file-loader 等。

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
}

• plugins：使用 Webpack 插件来实现更多功能，如代码压缩、生成 HTML 文件等。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new TerserPlugin()
  ]
}

3. vue.config.js

简介

vue.config.js 是 Vue CLI 项目的配置文件，Vue CLI 是一个基于 Vue.js 进行快速项目搭建和工具配置的工具。该文件可以对 Vue 项目的构建和开发环境进行自定义配置。

常见配置项及用途

• publicPath：部署生产环境和开发环境下的 URL。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/prod/' : '/'
}

• devServer：配置开发服务器，如端口号、代理等。

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

• chainWebpack 和 configureWebpack：用于对 Webpack 配置进行链式修改或直接修改。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(/node_modules/)
      .end()
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

总结

• vite.config.ts 是 Vite 构建工具的配置文件，适用于使用 Vite 构建的项目，具有快速启动和热更新的优势。
• webpack.config.js 是 Webpack 构建工具的配置文件，适用于需要强大模块打包功能的项目，可处理各种复杂的资源打包需求。
• vue.config.js 是 Vue CLI 项目的配置文件，主要用于对基于 Vue CLI 创建的项目进行构建和开发环境的自定义配置。