Не удается загрузить динамическую конфигурацию Webpack

Question

Я следовал инструкциям по динамическому импорту конфигурации на основе переменной среды с помощью веб-пакета. Это согласно официальной документации:

https://webpack.js.org/plugins/normal-module-replacement-plugin/

Пример: Файл: package.json

{
  "name": "03_branching",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    "develop": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "string-replace-loader": "^2.1.1",
    "webpack": "~4.6.0"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.15"
  }
}

Пример: Файл: configLoader.js

const fs = require('fs');

console.log('fs', fs);
const config = fs.readFileSync("./config/APP_ENV.json");

const properties = JSON.parse(config);

console.log("Environment: " + properties.environment);
console.log("HomepageUrl: " + properties.homepageUrl);

Файл: webpack.config.js

"use strict";

const webpack = require('webpack');
const path = require('path');

module.exports = function(env) {
    console.log('NODE_ENV: ', env.NODE_ENV); // 'local'

    let newEnv = 'local';
    if (env.NODE_ENV !== undefined) {
        newEnv = env.NODE_ENV;
    }
    console.log('newEnv', newEnv);
    return {
        target: 'web',
        node: {
          fs: 'empty'
        },
        entry:  path.join(__dirname, "./", "configLoader.js"),
        output: {
            path: path.join(__dirname, 'dist'),
            filename: 'bundle.js',
            libraryTarget: 'var',
            library: 'EntryPoint'
        },
        module: {
            rules: [
                {
                    test: /configLoader\.js$/,
                    loader: 'string-replace-loader',
                    options: {
                        search: 'APP_ENV',
                        replace: `${newEnv}`,
                        flags: 'i'
                    }
                }
            ]
        }
    }
};

Файл: config/local.json

{
    "environment": "local",
    "homepageUrl": "http://localhost:8080"
}

Файл: config/production.json

{
    "environment": "production",
    "homepageUrl": "http://www.google.com"
}

Я пытаюсь запустить node dist/bundle.js, но я получаю следующую ошибку ...

   ➜  03_branching git:(master) ✗ node dist/bundle.js fs {} /Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1
(function (exports, require, module, __filename, __dirname) { var EntryPoint=function(n){var e={};function o(r){if(e[r])return e[r].exports;var t=e[r]={i:r,l:!1,exports:{}};return n[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=e,o.d=function(n,e,r){o.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},o.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},o.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return o.d(e,"a",e),e},o.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},o.p="",o(o.s=1)}([function(n,e){},function(n,e,o){const r=o(0);console.log("fs",r);const t=r.readFileSync("./config/production.json"),c=JSON.parse(t);console.log("Environment: "+c.environment),console.log("HomepageUrl: "+c.homepageUrl)}]);


TypeError: r.readFileSync is not a function
    at Object.<anonymous> (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:686)
    at o (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:186)
    at /Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:600
    at Object.<anonymous> (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:609)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)

Это работает, если я бегу

node configLoader.js

Но если я запускаю команду webpack:

webpack --env.NODE_ENV=production
node dist/bundle.js

Не получается ... Как вы объединяете здесь все модули ядра узла с помощью веб-пакета? Я использую версию вебпака 4.6.0

Ура!

Answer 1

Вы используете не ту цель.
readFileSync существует только в узле. Но вы компилируете для сети.
Если вы измените цель на node, все должно работать.

Я подозреваю, что вы не хотите загружать файл конфигурации во время выполнения, но компилируете разные опции в зависимости от среды?
Если это так, взгляните на webpack-define-plugin . Вы можете поместить свою конфигурацию в переменную, не загружая файл во время выполнения.
Это также будет работать в браузере.