Javascript 网页包动态配置加载失败

我按照说明使用webpack基于环境变量动态导入配置。这是根据官方文件：

例如： 文件：

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"
  }
}

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

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

例如： 文件：

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);

"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'
                    }
                }
            ]
        }
    }
};

文件：

webpack.config.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);

"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

{
  "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"
  }
}

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

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

文件：

config/production.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"
  }
}

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

{
    "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)

但是如果我运行webpack命令：

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

它失败了。。。如何使用webpack捆绑所有节点核心模块？我正在使用网页包版本

4.6.0

---

干杯

您使用了错误的目标。

readFileSync

仅存在于节点中。但您正在为web进行编译。
如果您将目标更改为

节点

，则一切都应该正常

我怀疑您不想在运行时加载配置文件，而是根据环境编译不同的选项？
如果是这样，请看一看。您可以将配置放入变量中，而无需在运行时加载文件。

---

这也将在浏览器中起作用。

我将目标更改为节点，但它仍然无法按预期工作。感谢您提供使用webpack define插件的提示。我来看看！