《95%开发者不知道的vue.config.js高阶玩法》手撕Webpack配置链/SSR优化/多页应用，3倍构建效率实战方案

Vue工程化配置指南：vue.config.js深度解析

一、初始化配置文件

在Vue CLI工程根路径下创建配置文件：

项目层级示意：

your-project/
├── src/
├── public/
├── package.json
└── vue.config.js  # 新增配置文件

基本模板结构：

module.exports = {
  // 工程化配置区域
}

二、核心配置参数解析

部署路径设置（publicPath）

功能说明：控制静态资源访问路径

预设值：开发环境'/'，生产环境'/'

环境适配方案：

publicPath: process.env.NODE_ENV === 'production' 
  ? '/cdn-path/' 
  : '/dev-path/'

构建产物路径（outputDir）

功能说明：指定编译输出目录

默认路径：'dist'

自定义示例：

outputDir: 'release'

资源存储路径（assetsDir）

功能说明：静态资源子目录设置

初始值：空字符串

配置案例：

assetsDir: 'assets'

三、开发环境调优

本地服务配置模板：

devServer: {
  host: '0.0.0.0',    // 开放IP访问
  hotOnly: true,      // 热更新控制
  proxy: {            // 接口代理
    '/gateway': {
      target: 'http://api.domain.com',
      ws: true,
      secure: false
    }
  }
}

四、Webpack深度定制

链式配置方法（chainWebpack）

应用场景：模块规则扩展

SVG图标处理案例：

chainWebpack: config => {
  config.module
    .rule('custom-svg')
    .test(/\.svg$/)
    .use('svg-loader')
    .loader('svg-sprite-loader')
}

配置融合方法（configureWebpack）

功能特性：支持对象合并或函数式覆盖

生产环境专用配置：

configureWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.optimization.minimizer = [new TerserPlugin()]
  }
}

五、进阶工程配置

样式预处理配置

css: {
  modules: true,  // 启用CSS模块化
  loaderOptions: {
    less: {
      globalVars: {
        primaryColor: '#1890ff'
      }
    }
  }
}

多入口方案

pages: {
  mobile: {
    entry: 'src/mobile-entry.js',
    chunks: ['vendor', 'mobile']
  },
  desktop: {
    entry: 'src/desktop-entry.js',
    chunks: ['vendor', 'desktop']
  }
}

构建优化策略

{
  filenameHashing: false,   // 关闭哈希文件名
  runtimeCompiler: true,    // 启用运行时编译
  transpileDependencies: ['vuex-persist']  // 特殊依赖转译
}

配置系统运作原理

1. 配置叠加机制

采用webpack-chain实现配置链式管理

用户配置优先级高于CLI默认配置

数组合并策略为覆盖式而非追加式

2. 环境变量注入流程

.env.local → .env.[mode] → 全局默认

3. 构建过程阶段划分

基础配置（Base Config）

客户端构建（Client Build）

服务端渲染（SSR Build）

现代模式构建（Modern Build）

企业级配置参考

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  },

  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
  },

  configureWebpack: {
    plugins: [
      // 自定义插件
    ]
  },

  css: {
    extract: true,
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/styles/variables.scss";`
      }
    }
  }
}

导出完整webpack配置

vue inspect --mode=stage > debug.config.js

查看特定规则配置

vue inspect module.rules.10

关键注意点

路径别名推荐使用@指向src目录

生产环境建议关闭sourcemap提升安全性

大文件加载推荐配置externals进行CDN引入

定期运行vue-cli-service build --report分析包体积

Reference：

Webpack 官方文档：https://webpack.js.org/

Vue CLI 配置参考：https://cli.vuejs.org/config/

webpack-chain 文档：https://github.com/neutrinojs/webpack-chain