webpack深入场景——开发环境和生产环境配置

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

下一篇，说说开发环境和生产环境的配置详细情况。