Webpack：根据参数加载不同的文件名

Question

我正在尝试使用webpack实现以下功能：

我的webpack在我的javascript中模块化加载scss文件，并希望能够根据传递给webpack的参数使用不同的文件

例如，我希望能够导入我的样式：

import "./foo.scss"

如果我将./foo.projectA.scss传递给projectA，如果参数为./foo.projectB.scss，则传递projectB。

我很确定这是可行的，但花了一个小时阅读文档我不是更明智的。任何帮助将不胜感激。

Answer 1

Ar编译时Webpack需要知道您可能需要的所有潜在文件。这样它就可以为它们分配一个模块编号，并在运行时将它们提供。

例如，如果你有一个名为 styles 的目录，你可能需要三个文件。

/styles
    ./projectA.scss
    ./projectB.scss
    ./main.scss

首先，您要为目录

创建context

var moduleMap = require("./styles/" + projectName + ".scss");

这会将文件映射返回到其模块ID。然后，您可以在代码中使用此映射，以在运行时要求正确的scss。

var projectName= 'projectA';
moduleMap('./' + projectName + '.scss');

Givin上面的例子，将加载projectA.scss。然后你可以使用 DefinePlugin如果在编译期间确定了项目类型，则指定项目类型。