Vue 项目构建与开发入门：webpack 在 CLI 3 中的应用

YOLO实战营

于 2023-06-22 22:07:15 发布

阅读量273

点赞数

CC 4.0 BY-SA版权

分类专栏： 2025年全栈之道：前后端实战项目从入门到精通文章标签： webpack vue.js 前端

本文链接：https://blog.csdn.net/m0_52343631/article/details/131344847

2025年全栈之道：前后端实战项目从入门到精通专栏收录该内容

107 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍如何在Vue CLI 3.x中使用webpack，包括与vue-cli 2.x的区别，vue.config.js的配置项如baseURL、outputDir、productionSourceMap等，并探讨了devServer和默认插件的功能，帮助开发者更好地理解和配置项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

c. productionSourceMap

webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安装，最终实现你需要的功能并进行打包输出。

而在 Vue 的项目中，webpack 同样充当着举足轻重的作用，比如打包压缩、异步加载、模块化管理等等。如果你了解 webpack 那么相信本文会让你更了解其在 Vue 中的使用，如果你是一个 webpack 小白，那么也没事，相信你会很容易的了解它在项目中的配置和功能。

webpack 的使用

1. 与 vue-cli 2.x 的差异

如果你使用过 vue-cli 2.x，那么你应该了解其构建出的目录会包含相应的 webpack 配置文件，但是在 vue-cli 3.x 中你却见不到一份关于 webpack 的配置文件，难道 3.x 抛弃了 webpack？其实不然，3.x 提供了一种开箱即用的模式，即你无需配置 webpack 就可以运行项目，并且它提供了一个 vue.config.js 文件来满足开发者对其封装的 webpack 默认配置的修改。如图：

了解本专栏