让Webpack直接加载一个模块的包装器，而不是模块

Question

我们使用了一些需要配置的模块，即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中可能实现的情况并不相同。

Answer 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';