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

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

上一篇:webpack开发环境配置和生产环境配置


下一篇:anaconda + VSCode + 生产环境配置