理解vue-cli中的webpack

🌱 什么是 Vue CLI？

Vue CLI（Command Line Interface） 是 Vue.js 官方提供的项目构建工具，可以快速构建标准化的 Vue 项目结构，内置开发服务器、热更新、构建优化、插件系统等功能。

特点

• ✅ 快速搭建项目结构
• ✅ 内置开发服务器（基于 webpack-dev-server）
• ✅ 开箱即用的构建配置（Webpack、Babel、PostCSS 等）
• ✅ 插件式架构，灵活扩展
• ✅ GUI 图形界面（vue ui）

🔧 安装与初始化项目

安装 Vue CLI

npm install -g @vue/cli

或

yarn global add @vue/cli

安装成功后可用命令：

vue --version

创建新项目

vue create my-project

你将看到交互提示：

• 手动选择功能（如 Babel, Router, Vuex, CSS 预处理器等）
• 选择 Vue 版本（2 或 3）
• 保存为预设配置

启动开发服务器

cd my-project
npm run serve

默认运行在 http://localhost:8080

🧱 项目结构说明

my-project/
├── public/                  # 静态资源，index.html 模板在此
├── src/
│   ├── assets/              # 静态资源
│   ├── components/          # Vue 组件
│   ├── views/               # 页面视图（通常配合 Vue Router）
│   ├── App.vue              # 根组件
│   ├── main.js              # 入口文件
├── package.json             # 项目信息和依赖
├── babel.config.js          # Babel 配置
└── vue.config.js            # CLI 配置文件（可选）

Vue CLI 中的 Webpack

🌐 Vue CLI 中的 Webpack 是如何工作的？

Vue CLI 使用 Webpack 作为构建工具的核心引擎，但它通过封装和插件化，让开发者不需要手动编写繁杂的 webpack.config.js，而是通过插件和配置项间接控制 Webpack 行为。

默认集成：

创建项目时，Vue CLI 自动为你配置：
• Babel（通过 babel-loader）
• CSS 预处理器
• .vue 文件处理（vue-loader）
• Dev Server 热更新（webpack-dev-server）
• 文件资源（file-loader, url-loader）
• 懒加载支持（splitChunks）
• Hash 命名和 Tree-shaking 优化

🛠 方式一：通过 vue.config.js 覆盖 Webpack 配置

vue.config.js 是 Vue CLI 提供的配置文件，用于修改 Webpack 配置，支持三种方式：

✅ 简单配置方式

// vue.config.js
module.exports = {
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: true,
  productionSourceMap: false
}

✅ 通过 configureWebpack 修改配置

适合简单合并 Webpack 配置：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@img': '@/assets/images'
      }
    },
    externals: {
      vue: 'Vue'
    }
  }
}

✅ 通过 chainWebpack 使用 webpack-chain 精细控制

适合复杂修改（推荐方式）：

module.exports = {
  chainWebpack: config => {
    // 删除预加载
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')

    // 添加别名
    config.resolve.alias.set('@components', '@/components')

    // 修改 loader 选项
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions.whitespace = 'preserve'
        return options
      })
  }
}

🔍 常见 Webpack 配置项详解

alias（别名）

config.resolve.alias.set('@utils', path.resolve(__dirname, 'src/utils'))

externals（防止打包外部库）

configureWebpack: {
  externals: {
    vue: 'Vue',
    axios: 'axios'
  }
}

然后你需要手动引入 CDN：

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

修改 CSS 相关 Loader

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('scss')
      .oneOf('vue')
      .use('sass-loader')
      .tap(options => {
        options.additionalData = `@import "@/styles/variables.scss";`
        return options
      })
  }
}

SVG 精细处理

chainWebpack: config => {
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
    .use('svg-sprite-loader')
    .loader('svg-sprite-loader')
    .options({
      symbolId: 'icon-[name]'
    })
}

📦自定义 Loader & Plugin 示例

添加自定义 Loader

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

添加自定义 Plugin

const WebpackBar = require('webpackbar')

configureWebpack: {
  plugins: [
    new WebpackBar()
  ]
}

🧬查看 Webpack 最终配置的方法

使用 CLI 命令：

vue inspect > output.js

会将完整的 Webpack 配置导出到 output.js 中，非常适合调试和学习。

你也可以直接打印部分信息：

vue inspect --rules
vue inspect --plugins

🚀 构建优化相关 Webpack 方法

代码分包（Code Splitting）

Vue Router 支持懒加载：

const Home = () => import('@/views/Home.vue')

自动被打包为独立 chunk。

分离 vendor 和 runtime（优化缓存）

configureWebpack: {
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: 'single'
  }
}

关闭生产环境 source map

productionSourceMap: false

可减少打包体积和防止源码泄露。

🧭 Vue CLI 中 Webpack 的使用方法对比表