Question

我们使用一些需要配置的模块，i。即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;

在resolve.alias

中配置webpack.config.js

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

现在的问题是会计无法加载到包装文件中。既不是模块名称（如上例所示），也不是它在node_modules目录（import accounting from 'accounting/accounting.js';）内的完整路径。

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

webpack中有类似内容吗？

修改

通过在我的别名定义的末尾添加$，我现在可以通过在node_modules目录（accounting/accounting.js）内使用其完整路径来加载包装器脚本中的实际库。 / p>

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

让Webpack直接为模块而不是模块加载包装

修改

1 个答案: