以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享一下。
如何区分开发环境和生产环境？
众所周知，webpack时基于node.js平台运行的，要区分开发环境和生产环境还要存，node入手。我们启动webpack时，都需要输入一些命令，npm run 、yarn start之类的，所以我们就从命令行入手，告诉webpack，当前是什么环境。
- package.json
{
"name": "webpac-demo",
"version": "1.0.0",
"description": "webpack练习",
"main": "index.js",
"scripts": {
//配置开发环境参数。注意：真实开发中 package.json 文件中不能有注释
"dev": "webpack --env=development",
//配置生产环境参数
"dist": "webpack --env=production",
"start": "webpack-dev-server --env=development"
},
"dependencies": {
"font-awesome": "^4.7.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies":{
...
}
}
这样配置，当我们在命令行输入 npm run dev 和 npm run dist 时，就会附带一些参数到命令行中，有了参数，我们该如何拿到呢？那就要用到 node 的一个命令行参数解析引擎了。
minimist
minimist轻量级的命令行参数解析引擎
// test.js
var args = require('minimist')(process.argv.slice(2));
console.log(args.hello);
$ node test.js --env=production
// production
$ node test.js --env=development
// development
$ node test.js --env
// true 注意：不是空字符串而是true
minimist会把参数解析成一个JSON对象：{key:value}，有了这个JSON对象，我们就可以知道，当前的命令是要执行开发打包，还是生产打包了。
// webpack.config.js
const webpack = require('webpack');
//当前项目的绝对路劲
const path = require('path');
// 命令行参数解析引擎
const argv = require('minimist')(process.argv.slice(2));
let env = null;
switch (argv.env) {
case 'production':
//生产环境配置文件名
env = 'webpack.config.prod';
break;
default:
//开发环境配置文件名
env = 'webpack.config.dev';
}
console.log(`当前是 ${argv.env} 打包`);
// 这时候，我们就可以加载相应的wabpack配置了。
module.exports = require( path.resolve( '加载的配置文件路劲'，env ) );