让 Webpack 为模块加载包装器，而不是直接加载模块答案

【问题标题】：Make Webpack load a wrapper for a module instead of the module directly让 Webpack 为模块加载包装器，而不是直接加载模块
【发布时间】：2018-11-18 06:27:38
【问题描述】：

我们使用一些需要配置的模块，即。 e. accounting.js。我们希望集中配置这些库，并在将配置的库导入某处时自动加载它。

因此，当脚本通过import accounting from 'accounting'; 导入会计时，我们不希望 webpack 直接加载库，而是加载配置的包装器。

配置包装脚本看起来像这样

import accounting from 'accounting';

accounting.settings = {
    currency: {
        symbol : "€",   // default currency symbol is '$'
        format: "%v %s", // controls output: %s = symbol, %v = value/number (can be object: see below)
        decimal : ",",  // decimal point separator
        thousand: ".",  // thousands separator
        precision : 2   // decimal places
    },
    number: {
        precision : 0,  // default precision on numbers is 0
        thousand: ".",
        decimal : ","
    }
};

export default accounting;

在webpack.config.js 中配置resolve.alias

// ...
resolve: {
    alias: {
        'accounting': source_dir + '/accounting.wrapper.js'
    }
}
// ...

现在的问题是无法在包装文件中加载记帐。既不是按模块名称（如我上面的示例所示），也不是按其在 node_modules 目录中的完整路径 (import accounting from 'accounting/accounting.js';)。

使用 RequireJs，您可以为每个文件定义别名。您可以创建一个适用于所有文件的别名规则，该规则将库别名为其包装器。然后，您可以创建另一个特定于包装文件的别名规则，以便在包装文件中计算引用实际库的内容。

webpack 有类似的东西吗？

编辑

通过在别名定义的末尾添加$，我现在可以使用 node_modules 目录 (accounting/accounting.js) 中的完整路径将实际库加载到包装脚本中。

alias: {
    'accounting$': // ...
}

不过，这与 RequireJS 中的情况不同。

【问题讨论】：

标签： webpack requirejs

【解决方案1】：

由于导入充当单例并且应该在任何地方返回相同的对象，您是否尝试在应用中使用模块之前导入模块并设置accounting.settings？

无论如何，要使用 webpack 包装模块，我会检查 NormalModuleReplacementPlugin:

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
    // ...
    plugins: [
        new webpack.NormalModuleReplacementPlugin(
            /^accounting$/,
            path.resolve(__dirname, 'path/to/accounting-wrapper.js'),
        ),
    ],
};

在包装器中，像这样加载原始模块：

import accounting from '../path/to/node_modules/accounting';

【讨论】：