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';複製代碼