当前位置：首页 > ops >正文

Webpack、Vite配置技巧与CI/CD流程搭建全解析

ops 2025/7/13 9:13:25

Webpack、Vite配置技巧与CI/CD流程搭建全解析

在现代前端开发中，构建工具配置和自动化部署流程是提升开发效率和项目质量的关键环节。本文将深入探讨Webpack和Vite这两大构建工具的核心配置技巧，并详细介绍CI/CD流程的搭建方法。

一、Webpack核心配置技巧

Webpack作为目前最主流的构建工具，其配置的灵活性既带来了强大的功能，也增加了学习成本。以下是一些关键配置技巧：

模式选择与环境变量管理

// webpack.config.js
const path = require('path');
const Dotenv = require('dotenv-webpack');module.exports = (env, argv) => {const isProduction = argv.mode === 'production';return {mode: isProduction ? 'production' : 'development',entry: './src/index.js',output: {path: path.resolve(__dirname, 'dist'),filename: isProduction ? '[name].[contenthash].js' : '[name].js'},plugins: [new Dotenv({path: isProduction ? './.env.production' : './.env.development'})]};
};

性能优化策略

// 配置分割代码
optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'}}},runtimeChunk: 'single'
}// 配置资源压缩
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {optimization: {minimizer: [new TerserPlugin({terserOptions: {compress: {drop_console: true}}})]}
};

Loader与Plugin的最佳实践

// 配置样式处理
module: {rules: [{test: /\.scss$/,use: ['style-loader',{loader: 'css-loader',options: {modules: {localIdentName: '[name]__[local]--[hash:base64:5]'}}},'sass-loader','postcss-loader']}]
}// 配置图片资源处理
{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 8192,name: '[name].[hash].[ext]',outputPath: 'images/'}}]
}

二、Vite配置技巧解析

Vite作为新一代构建工具，凭借其极快的冷启动速度和高效的HMR能力，正在被越来越多的项目采用。

基础配置

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],resolve: {alias: {'@': '/src'}},server: {port: 3000,proxy: {'/api': {target: 'http://localhost:8000',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});

生产环境优化

build: {minify: 'terser',terserOptions: {compress: {drop_console: true,drop_debugger: true}},rollupOptions: {output: {manualChunks(id) {if (id.includes('node_modules')) {return id.toString().split('node_modules/')[1].split('/')[0].toString();}}}}
}

插件生态系统

// 使用vite-plugin-html进行HTML优化
import { createHtmlPlugin } from 'vite-plugin-html';export default defineConfig({plugins: [react(),createHtmlPlugin({minify: true,inject: {data: {title: 'My Vite App',injectScript: `<script src="./inject.js"></script>`}}})]
});

三、CI/CD流程搭建详解

CI/CD（持续集成/持续部署）是现代软件开发中的重要实践，能够大幅提升团队协作效率和软件交付质量。

GitHub Actions实现CI流程

# .github/workflows/ci.yml
name: CIon:push:branches: [ main ]pull_request:branches: [ main ]jobs:build:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v3- name: Set up Node.jsuses: actions/setup-node@v3with:node-version: 18- name: Install dependenciesrun: npm ci- name: Lintrun: npm run lint- name: Testrun: npm test- name: Buildrun: npm run build

配置CD流程部署到AWS S3

# .github/workflows/cd.yml
name: CDon:push:branches: [ main ]jobs:deploy:runs-on: ubuntu-latestneeds: buildsteps:- uses: actions/checkout@v3- name: Set up Node.jsuses: actions/setup-node@v3with:node-version: 18- name: Install dependenciesrun: npm ci- name: Buildrun: npm run build- name: Deploy to S3uses: jakejarvis/s3-sync-action@v0.5.1with:args: --acl public-read --deleteenv:AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}AWS_REGION: 'us-east-1'SOURCE_DIR: 'dist'

Docker化部署方案

# Dockerfile
FROM node:18 as buildWORKDIR /appCOPY package*.json ./RUN npm ciCOPY . .RUN npm run buildFROM nginx:1.21-alpineCOPY --from=build /app/dist /usr/share/nginx/htmlCOPY nginx.conf /etc/nginx/conf.d/default.confEXPOSE 80CMD ["nginx", "-g", "daemon off;"]