以前自己写一小项目时,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 ) );