前言
Vue.js 是一个渐进式 JavaScript 框架，它不仅提供了数据绑定和组件化的能力，还有丰富的生态系统。而 vue-cli3 是 Vue.js 官方提供的一个脚手架工具，它可以帮助我们快速搭建 Vue.js 项目，而且还能够自定义配置，满足不同的需求。
在 vue-cli3 中，webpack 是默认的打包工具，webpack.config.js 是 webpack 配置文件。通过修改 webpack.config.js，我们可以对 webpack 的各种配置进行修改，从而满足自己的需求。本文将介绍 vue-cli3 中 webpack.config.js 的基本配置。
基本配置
修改入口文件
在 vue-cli3 中，入口文件默认为 src/main.js。如果我们想要修改入口文件，可以在 webpack.config.js 中进行配置。例如，我们想要将入口文件修改为 src/app.js。
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
------
-------------
--------
--------------------
------
-
-修改输出目录
在 vue-cli3 中，输出目录默认为 dist。如果我们想要修改输出目录，可以在 webpack.config.js 中进行配置。例如，我们想要将输出目录修改为 build。
module.exports = {
outputDir: 'build'
}添加别名
在 vue-cli3 中，我们可以使用 @ 来代替 src 目录。但是，有时候我们可能需要添加其他别名，以方便我们的开发。例如，我们想要将 @components 指向 src/components 目录。
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@components', resolve('src/components'))
}
}添加 Loader
在 vue-cli3 中，我们可以通过添加 Loader 来处理各种文件。例如，我们想要添加 less-loader 来处理 less 文件。
-- -------------------- ---- -------
-------------- - -
------------- ------ -- -
-------------
-------------
----------------
-------------------
----------------------
------
-
-添加插件
在 vue-cli3 中，我们可以通过添加插件来扩展 webpack 的功能。例如，我们想要添加 webpack-bundle-analyzer 插件来分析打包后的文件。
-- -------------------- ---- -------
----- -------------------- - -------------------------------------------------------
-------------- - -
----------------- ------ -- -
-- --------------------- --- ------------- -
------ -
-------- -
--- ----------------------
-
-
-
-
-总结
通过对 webpack.config.js 的基本配置，我们可以对 webpack 进行自定义配置，满足不同的需求。在实际开发中，我们可以根据自己的需求进行配置，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65791a3fd2f5e1655d311e66