查看vue-cli搭建项目的webpack默认配置

最新推荐文章于 2023-09-18 15:39:44 发布

宛宛心里的月亮

最新推荐文章于 2023-09-18 15:39:44 发布

阅读量6.2k

点赞数 2

分类专栏：前端技术文章标签： webpack vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_40815009/article/details/121315141

版权

前端技术专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何通过vue-cli的inspect命令查看和理解生成的webpack配置文件，特别是针对vue.js项目的特殊配置，如vue-loader、url-loader、css处理、js/babel处理和ts/ts-loader等。同时，提到了在vue.config.js中自定义配置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

⭐⭐⭐⭐vue-cli对webpack配置进行了抽象，所以不能直接查看，但是vue-cli-service 暴露了 inspect 命令用于审查解析好的 webpack 配置。
这里的vue-cli版本4.5，webpack版本5.51

vue inspect > webpconfig.js

生成一个webpconfig.js文件

🦁下面来看一下这个文件中有什么配置。
webpconfig.js结构如下

{
	mode:'development', //模式
	context:'',
	node:{
	},
	output:{}, //出口
	resolve:{}, //解析
	resolveLoader:{},
	mudule:{}, //loader
	optimization:{},  //优化
	entry:{},    //入口
	plugins:[],  //webpack插件
	externals:{} //外部扩展-这个文件中没有配置
}

1.入口

entry: {
    app: [
      './src/main.ts'
    ]
  }

2.各种loader
在这里插入图片描述
这里面包含:

解析.vue文件的cache-loader，vue-loader;
解析图片、视频音频、fonts文件的的url-loader,file-loader
解析.css，.scss文件的vue-style-loader，css-loaser, postcss-loader,sass-loader
解析.js文件babel-loader
解析.ts文件ts-loader
等。
3.出口

  output: {
    path: 'D:\\MYWORK\\zhhcsystem\\dist',
    filename: 'js/[name].js',
    publicPath: '/',
    chunkFilename: 'js/[name].js'
  },

⭐⭐⭐⭐当然，如果你想自己重新配置部分功能vue.config.js中配置即可。