Question

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

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

它失败了......你如何使用webpack捆绑所有节点核心模块？我使用的是webpack版本4.6.0

干杯！

Answer 1

你使用了错误的目标。
readFileSync仅存在于节点中。但是你正在为网络编译如果您将目标更改为node，那么一切都应该有效。

我怀疑你不想在运行时加载配置文件，但根据环境编译不同的选项？
如果是这样，请查看webpack-define-plugin。您可以将配置放在变量中，而无需在运行时加载文件这也可以在浏览器中使用。

Webpack动态配置加载失败

1 个答案: