Vue.js 是一款前端框架，它的目标是通过尽可能简单的 API 实现响应式的数据绑定和组合的视图组件。而 vue-cli3 是 Vue.js 官方提供的脚手架工具，它可以帮助我们快速创建一个基于 Vue.js 的项目框架。
在 vue-cli3 中，webpack.base.conf.js 是我们项目的基础配置文件，它定义了项目的基本配置信息，包括入口文件、输出文件、loader、plugin 等。本文将详细介绍 webpack.base.conf.js 的配置项及其作用。
入口文件
入口文件是指 Webpack 打包时的入口文件，它定义了 Webpack 从哪里开始打包。在 webpack.base.conf.js 中，我们可以通过以下代码来配置入口文件：
-------------- - -
------ -
---- ---------------
-
-上述代码中，我们定义了一个名为 app 的入口文件，它的路径是 ./src/main.js。
输出文件
输出文件是指 Webpack 打包后生成的文件，它定义了 Webpack 打包后的文件输出路径及文件名称。在 webpack.base.conf.js 中，我们可以通过以下代码来配置输出文件：
-------------- - -
------- -
----- ----------------------- -----------
--------- ------------------
-
-上述代码中，我们定义了一个名为 dist 的输出文件夹，它的路径是通过 path.resolve 函数获取的。而文件名称则是使用了占位符 [name] 和 [hash]，它们分别代表入口文件的名称和打包后的 hash 值。
Loader
Loader 是 Webpack 的一个核心概念，它用于对不同类型的文件进行加载和转换。在 webpack.base.conf.js 中，我们可以通过以下代码来配置 Loader：
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
------- --------------
--
-
----- ---------
------- ------------
--
-
----- ---------
---- -
---------------
------------
-
-
-
-
-上述代码中，我们定义了三个 Loader：babel-loader、vue-loader 和 css-loader。其中，babel-loader 用于将 ES6/ES7 代码转换为 ES5 代码，vue-loader 用于加载 Vue.js 单文件组件，css-loader 用于加载 CSS 文件。
Plugin
Plugin 是 Webpack 的另一个核心概念，它用于完成一些比 Loader 更加复杂的任务，例如代码压缩、文件拷贝等。在 webpack.base.conf.js 中，我们可以通过以下代码来配置 Plugin：
-------------- - -
-------- -
--- -------------------
--------- ---------------------
---
--- --------------------
-
-上述代码中，我们定义了两个 Plugin：HtmlWebpackPlugin 和 CleanWebpackPlugin。其中，HtmlWebpackPlugin 用于生成 HTML 文件，并将打包后的 JS 文件自动引入到 HTML 文件中，CleanWebpackPlugin 用于在每次打包时清空输出文件夹。
总结
本文对 vue-cli3 配置文件 webpack.base.conf.js 进行了详细介绍，包括入口文件、输出文件、Loader 和 Plugin。通过深入了解这些配置项，我们可以更加灵活地配置我们的 Vue.js 项目，从而实现更好的开发体验和更高的开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65781797d2f5e1655d1f269a