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 ) );

下一篇，說說開發環境和生產環境的配置詳細情況。