Vue CLI 使用网页包

本文介绍了如何配置Webpack,包括在vue.config.js中简单设置,调整加载器选项,添加新加载器,以及如何检查和理解Webpack配置。通过vue inspect命令,你可以输出配置到文件或查看特定规则和插件,以便于理解和调试你的项目Webpack配置。
摘要由CSDN通过智能技术生成

关于使用 webpack 的配置,我们可以从以下几个方面来进行了解与认识:

简单配置

调整webpack配置的最简单方法是为 configureWebpack 选项提供对象vue.config.js

module.exports = {
	configureWebpack: {
		plugins: [
			new MyAwesomeWebpackPlugin()
		]
	}
}

修改加载程序的选项

添加一个新的加载器

检测项目的webpack配置

输出重定向到配置好的文件中便于检查:

vue inspect > output.js

通过指定路径检查配置子集:

vue inspect module.rule.0

以命名规则或插件为目标:

vue inspect --rule vue
vue inspect --plugin html

列出所有命名的规则和插件:

vue inspect --rules
vue inspect --plugins

将解析的配置用作文件,使用以下路径

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

文件可以动态解析并导出 vue-cli-service命令中使用的完全相同的webpack配置,包括来自插件甚至自定义配置的配置。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值