Vue-CLI 3.0 是一个用于快速搭建 Vue.js 项目的脚手架工具，它集成了大量的工具，其中包括 Webpack 4.0。在使用 Vue-CLI 3.0 搭建项目时，Webpack 扮演着非常重要的角色。在这篇文章中，我们将深入探讨 Vue-CLI 3.0 源码中的 Webpack 4.0 相关部分，带领读者了解 Webpack 4.0 的核心概念及其在 Vue-CLI 3.0 中的应用。
Webpack 4.0 简介
Webpack 是一个打包工具，它将一个或多个 JavaScript 文件打包成一个文件。随着前端技术的不断发展，Webpack 成为了前端构建工具中的重要一员。Webpack 3.x 版本已推出一段时间，而 2018 年 2 月 Webpack 4.0 正式发布，带来了许多新的特性和优化。
Webpack 4.0 和 Webpack 3.x 相比有以下几点改进：
- Webpack 4.0 增加了模块类型，原先的模块类型是 commonjs、amd、umd、es6，新增了 system 以支持 SystemJS；
- Webpack 4.0 默认启用了 production 模式，该模式下会自动开启 UglifyJsPlugin 和 ModuleConcatenationPlugin，实现代码压缩和模块拼接；
- Webpack 4.0 优化了构建性能，减少了大量的无用代码，实现了构建速度的提升。
通过学习 Vue-CLI 3.0 的源码，我们将更深入地了解 Webpack 4.0 的改进和应用。
Vue-CLI 3.0 中的 Webpack 配置
Vue-CLI 3.0 中的 Webpack 配置非常强大，它可以根据用户不同的需求自动生成不同的配置。Vue-CLI 3.0 的 Webpack 配置文件位于项目的 node_modules/@vue/cli-service/lib/config 目录中，其中的配置项分为三种：
vue.config.js：用户自定义配置，包括 devServer、publicPath、outputDir 等；webpack.config.js：Webpack 配置，包括 entry、output、mode、module、plugins 等；chainWebpack.js：一些高级配置，可以通过 API 修改 Webpack 的配置。
下面我们将逐个解析这些配置文件。
vue.config.js
vue.config.js 位于项目根目录下，可以通过它来自定义 Vue-CLI 3.0 的配置，例如应用的端口号、代理设置、打包输出路径等。示例代码如下：
-------------- - -
---------- -
----- -----
------ -
------- -
------- -------------------------
------------- -----
------------ -
-------- --
-
-
-
--
---------- ------
-这段代码中的配置项 devServer 可以设置开发服务器的参数，包括 port 端口号和 proxy 代理设置，其中 proxy 代理还可以通过 pathRewrite 对路径进行重写。outputDir 是打包生成的文件路径，这里设置为 dist 目录。
webpack.config.js
Webpack 是 Vue-CLI 3.0 中最重要的构建工具，webpack.config.js 中存放着 Webpack 的各种配置。Webpack 的核心配置是 entry、output、module、plugins 等，我们将逐一讲解。
entry
entry 是 Webpack 构建的入口文件。在 Vue-CLI 3.0 中，entry 是通过 @vue/cli-service 中的 getServicePaths 函数来获取的，示例代码如下：
----- ------- - ---------------------------------------
----- ------- - --- ----------------------------------- -- --------------
----- ----- - ------------------------
-------- --------------- --------- -
----- --------------- - --------------
----------------------------- ------------------
-
----- -------------- - ---------------
- ----------------------------- ------------------
- ----------------------------- ----------------
----- ------ - ----------------------- -- --
----- ---------------- - ----------------------- -- -------------
----- ------------ - ------------------- -- ----------------------
----- ----- - ------------- -- -------------------------- -- ----------------------
-- ------- ----- --- -------- -- --------------------- -
------ ------------------------------ -------
-
------ ------------------------------- ---- -- -
--- --- - ----------
-- ------- --- --- -------- -- ------------------- -
--- - -----
-
--------------- -- -
-------------------------------------- ---
--
------ ---
-- ---
-这段代码中的 getServicePaths 函数会判断用户是否使用了旧的配置（即 config/index.js 或 vue.config.js），如果用户使用了旧的配置，那么 entry 就是通过 Config 类来获取的。
output
output 是 Webpack 打包后生成的文件的路径和文件名。在 Vue-CLI 3.0 中，output 的路径和文件名都是自动生成的。示例代码如下：
-------------- - - ---------- ------- ---------- --------- ---------------- ----- --- -
这里的 outputDir 代表打包生成的文件在哪个目录下，assetsDir 代表该目录下的静态资源所在的目录，filenameHashing 表示文件名是否需要进行哈希，避免浏览器缓存问题。
module
module 是处理项目中的各种文件类型的规则，例如处理 CSS 时使用的 css-loader 和 style-loader，以及处理 ES6 语法的 babel-loader。在 Vue-CLI 3.0 中，module 配置项是通过 @vue/cli-service 中的 resolveModule 函数获取的，示例代码如下：
----- ------- - --------------------------------------- ----- ------- - --- ----------------------------------- -- -------------- ----- ------- - ------------------------------ -------------- - --------------
这段代码中的 resolveWebpackConfig 函数会读取根目录下的 vue.config.js 文件和 @vue/cli-service 中的内置配置，根据这些配置生成 Webpack 配置。
plugins
plugins 是 Webpack 中的插件，用于增强 Webpack 的功能。在 Vue-CLI 3.0 中，插件也是通过 @vue/cli-service 中的 resolveWebpackConfig 函数获取的，示例代码如下：
----- ------- - --------------------------------------- ----- ------- - --- ----------------------------------- -- -------------- ----- ------- - ------------------------------ -------------- - ---------------
这段代码中的 options.plugins 返回的是一个数组，包含了 Webpack 配置中所用到的所有插件。常用的插件有 html-webpack-plugin、copy-webpack-plugin、uglifyjs-webpack-plugin 等。
chainWebpack.js
Vue-CLI 3.0 中的 Webpack 配置项非常强大，但有时候我们需要更加高级的配置，此时就需要使用 chainWebpack.js 了。chainWebpack.js 中包含了一些高级的配置项，例如优化打包后的文件大小和性能、优化异步加载模块的方式等。
示例代码如下：
-------------- - -------- -- -
----------------------------
------------------------------------ - --------
-------------------------
------------------
------------ -- -
---------------------------------- - ----------
--
-这段代码中的配置项有三个。第一个配置删除了 hmr 插件，即 HMR（Holt Module Replacement）模块热更新插件；第二个配置将 splitChunks 插件中的 chunk 名称重命名为 vendor；第三个配置修改了规则，将 vue-loader 的选项中的 whitespace 修改为 condense。这些配置项可以通过 config 参数来修改。
总结
Vue-CLI 3.0 是一个非常强大的脚手架工具，其中集成了 Webpack 4.0。Webpack 4.0 性能优化和改进实现了更快的打包构建和更好的代码压缩。在 Vue-CLI 3.0 的配置中，vue.config.js、webpack.config.js 和 chainWebpack.js 都有着非常重要的作用。通过对这些配置的深入解读，我们可以更好地了解 Webpack 4.0 的核心概念及其在 Vue-CLI 3.0 中的应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6534dbbc7d4982a6eba401eb