15、区分不同环境(生产与开发环境)

区分生产与开发环境

如何区分

1. 新建三个文件

项目根目录
    |
    --------webpack.base.js  //基本配置 公共配置 （原先我们写的webpack.config.js）
    |
    --------webpack.dev.js     //开发环境
    |
    --------weboack.prod.js    //生产环境
           

1. 安装插件 webpack-merge

npm i webpack-merge -D
           

1. 写开发环境和生产环境的配置文件

//webpack.dev.js开发环境
let { smart } = require('webpack-merge');
let base = require('./webpack.base.js');

modules.exports = smart(base,{//这样就能够让后面的对象的属性覆盖到base对象的属性
	mode: 'development',
	devServer:{

	},
	devtool:'source-map'
});
           

//webpack.prod.js
let { smart } = require('webpack-merge');
let base = require('./webpack.base.js');

modules.exports = smart(base,{
	mode: 'production',
	optioization:{
		minimizer:[

		]
	},
	plugins:[

	]
});
           

1. 然后npm run build就走webpack.prod.js文件，npm run dev就走webpack.dev.js文件
2. 这样就已经完成了生产环境与开发环境的区分