在前端开发中，我们通常需要使用一些轮子或者工具来帮助我们更快地完成开发任务。而 npm 是一个非常方便的前端工具包管理工具，可以让我们更加便捷地使用和管理第三方工具包。而 @excitare/cli-custom-config 就是一个针对自定义 webpack 配置的 npm 包，它可以帮助我们更加方便地定制自己的 webpack 配置。
安装
@excitare/cli-custom-config 是一个 npm 包，因此我们需要使用 npm 来进行安装。打开终端，进入项目目录，执行以下命令：
npm i @excitare/cli-custom-config --save-dev
使用
安装完成后，我们需要在项目中新增一个配置文件，文件名为 .excitarecli.js，并将需要自定义的 webpack 配置写在该文件中。示例：
module.exports = {
webpack: (config, { isServer }) => {
config.resolve.alias['@'] = path.resolve(__dirname, 'src')
if (isServer) {
require('./scripts/generate-sitemap')
require('./scripts/generate-rss')
}
return config
},
devServer: (configFunction) => {
return (proxy, allowedHost) => {
const config = configFunction(proxy, allowedHost)
config.contentBase = path.join(__dirname, 'public')
config.watchContentBase = true
return config
}
},
}这里的 webpack 和 devServer 选项都是可选的，如果你不需要对这两部分配置进行自定义，可以省略。如果你不需要自定义 webpack 配置，可以在 .excitarecli.js 中只定义 devServer 选项。
接下来，在 package.json 中新增 scripts：
{
"scripts": {
"dev": "excitarecli start",
"build": "excitarecli build"
}
}之后，你就可以使用 npm run dev 命令来开启开发服务器，使用 npm run build 来构建生产环境代码。
优势
使用 @excitare/cli-custom-config 的好处在于可以让我们更加方便地对 webpack 进行自定义配置，而无需修改原始配置文件。这样做的好处在于：
- 避免了由于修改原始配置文件造成的一些问题
- 可以让我们更加方便地对多个项目进行配置管理
- 可以实现一些原本不易实现的配置需求，例如自定义 webpack 的某些loader或plugin
总结
虽然使用 @excitare/cli-custom-config 并没有什么绝对优势，但这个 npm 包的确可以帮助我们更加方便地定制 webpack 配置，让我们的前端开发变得更加高效和便捷。如果你需要对 webpack 进行一些自定义配置，那么 @excitare/cli-custom-config 可以是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e0fb81d47349e53d10