通过 vue.config.js 修改 webpack的默认配置，实现开发模式和发布模式的打包文件分开式

通过 vue.config.js 修改 webpack的默认配置，实现开发模式和发布模式的打包文件分开式 - 前端笔记-默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack 需要通过vue.config.js来配置。 chainWebpack可以通...

首页>> web前端 >>通过 vue.config.js 修改 webpack的默认配置，实现开发模式和发布模式的打包文件分开式 - 前端笔记

2020-1-28

分类： web前端

文章作者：痴迷

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack 需要通过vue.config.js来配置。 chainWebpack可以通过链式编程的形......

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack 需要通过vue.config.js来配置。

chainWebpack可以通过链式编程的形式，修改webpack配置
configureWebpack可以通过操作对象的形式，修改webpack配置

1.在项目根目录中创建vue.config.js文件，

2.编辑vue.config.js中文件的实现，配置webpack的

		module.exports = {
	
		  chainWebpack: config => {
	
		    //发布模式 
	
		    config.when(process.env.NODE_ENV === 'production', config => {
	
		      //entry找到默认的打包入口，调用clear则是删除默认的打包入口 
	
		      //add添加新的打包入口 
	
		      config.entry('app').clear().add('./src/main-prod.js')
	
		    })
	
		    //开发模式 
	
		    config.when(process.env.NODE_ENV === 'development', config => {
	
		      config.entry('app').clear().add('./src/main-dev.js')
	
		    })
	
		  }
	
		}