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",
 },复制代码

重点：用

alias

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

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

项目内使用

import hostname from 'hostname';复制代码