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

⭐⭐⭐⭐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中配置即可。