区分环境

[TOC]

试想，以我们现在的知识，能否区分环境呢？

自己实现的区分环境的方法

答案是可以的，因为我们可以使用webpack --config xxx.js来指定让webpack加载哪个配置文件。

于是，我们可以创建

webpack.config.js	//存放两个环境的公共配置
webpack.dev.js		//存放dev环境的配置
webpack.prod.js		//存档prod环境的配置

那么，怎么让webpack在不同的环境下加载不同的文件呢？

package.json

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack --config webpack.dev.js",	//开发环境加载webpack.dev.js
        "build": "webpack --config webpack.prod.js"	//生产加载webpack.prod.js
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    }
}

webpack区分环境

有些时候，我们需要针对生产环境和开发环境分别书写webpack配置

为了更好的适应这种要求，webpack允许配置不仅可以是一个对象，还可以是一个函数

module.exports = env => {
    return {
        //配置内容
    }
}

在开始构建时，webpack如果发现配置是一个函数，会调用该函数，将函数返回的对象作为配置内容，因此，开发者可以根据不同的环境返回不同的对象

在调用webpack函数时，webpack会向函数传入一个参数env，该参数的值来自于webpack命令中给env指定的值，例如

npx webpack --env abc # env: "abc"

npx webpack --env.abc # env: {abc:true}
npx webpack --env.abc=1  # env： {abc:1}
npx webpack --env.abc=1 --env.bcd=2 # env: {abc:1, bcd:2}

这样一来，我们就可以在命令中指定环境，在代码中进行判断，根据环境返回不同的配置结果。

最佳实践

新建文件

webpack.config.js	//存放两个环境的公共配置
webpack.dev.js		//存放dev环境的配置
webpack.prod.js		//存档prod环境的配置
webpack.config.js 	//实际上webpack还是加载的这个配置文件

webpack.common.js

// 存放webpack的公共配置
const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist/scripts"),
    filename: "[name]-[hash:5].js",
  },
};

webpack.dev.js

module.exports = {
  mode: "development",
  devtool: "source-map",
};

webpack.prod.js

module.exports = {
  mode: "production",
  devtool: "none",
};

webpack.config.js

const commonConfig = require("./webpack.common.js");
const devConfig = require("./webpack.dev.js");
const proConfig = require("./webpack.prod.js");

//将webpack导出的配置更改为函数，env是在命令行时传入的
module.exports = (env) => {
  console.log("环境", env);//{production:true}
  if (env && env.production) {
    //加载生产环境配置文件
    return {
      ...commonConfig,
      ...proConfig,
    };
  } else {
    //加载开发环境配置文件
    return {
      ...commonConfig,
      ...devConfig,
    };
  }
};

package.json

{
    "name": "test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "webpack",
        "build": "webpack --env.production"//给webpack.config.js的env参数指定值
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
    }
}