理解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 的使用方法对比表
| 方法 | 功能 | 适用场景 |
|---|---|---|
| vue.config.js 常规配置 | 快速调整路径、端口、map 等 | 基础修改 |
| configureWebpack | 合并对象，简单增强 | 添加插件、externals 等 |
| chainWebpack | 精细修改、链式调用 | 修改 loader、plugin、规则顺序等 |
| vue inspect | 查看实际配置 | 调试或学习 |
| 自定义 plugin / loader | 注入复杂逻辑 | 特殊构建需求 |