webpack4 小技巧：编译进行时切换加载文件

在webapck中，我们经常会用alias去对应某个目录而获得绝对路径。但其实在动态加载文件时，也可以用它做一些巧思的事。

比如在编译进行时，对应某个动态文件，从而决定加载哪一份配置文件。而不需要全部引入，在编译代码中才进行逻辑判断

下面代码使用场景：切换env文件夹下三个环境配置（服务器域名及三方的常量配置）

上代码

配置

yarn add cross-env --dev

//package.json
"scripts": {
    "build:test": "cross-env NODE_ENV=test webpack --config  ./build/webpack.prod.js",
    "build:pre": "cross-env NODE_ENV=pre webpack --config  ./build/webpack.prod.js",
    "build:prod": "cross-env NODE_ENV=prod webpack --config  ./build/webpack.prod.js",
    "serve": "cross-env NODE_ENV=test webpack-dev-server --config ./build/webpack.dev.js",
 },

重点：用

//webpack.config.js
const _env = process.env.NODE_ENV;

//下面为webpack配置
resolve: {
        alias: {
           hostname:path.resolve(__dirname, `../env/${_env}.js`),
        }
}

项目内使用

import hostname from 'hostname';