Webpack 用于品牌推广的网页包普通模块更换_Webpack

Webpack 用于品牌推广的网页包普通模块更换

webpack

Webpack 用于品牌推广的网页包普通模块更换,webpack,Webpack,我正在开发一款品牌产品，我有以下文件夹结构： -> default js folder -> brands folder ----> a brand --------> js ------------> brand specific js file 我希望在Webpack上进行绑定时，使用默认文件覆盖特定于品牌的Javascript文件（两个文件都有相同的名称-例如，每个文件夹都有一个profile.js文件）。我找到了一个方法，这是正常的模块更换，但我没有意识到

我正在开发一款品牌产品，我有以下文件夹结构：

-> default js folder
-> brands folder
----> a brand
--------> js
------------> brand specific js file

我希望在Webpack上进行绑定时，使用默认文件覆盖特定于品牌的Javascript文件（两个文件都有相同的名称-例如，每个文件夹都有一个

profile.js

文件）。我找到了一个方法，这是正常的模块更换，但我没有意识到这一点

我怎么做？是否有人可以共享示例Web包配置？

您可以使用resolve alias来覆盖基于配置的文件解析（在本例中为品牌名称或回退到默认值）。下面是一个简单的例子：

const path = require('path');
const brand = process.env.BRAND;

// Then add this to your Webpack config
{
 ...
 resolve: {
   alias: {
     brand: brand
        ? path.resolve(__dirname, 'src', brand)
        : path.resolve(__dirname, 'src', 'defaultDirectory'), 'profile.js')
   }
 }
}

之后，当您需要捆绑某个品牌时，只需在环境变量中设置

brand=somebrand

。每当您从“品牌/配置文件”导入配置文件时，

和从“品牌/联系人”导入联系人时，将分别解析为/src/somebrand/Profile.js
和/src/somebrand/Contact.js
。如果没有定义品牌，它将退回到默认的/src/defaultDirectory/profile.js
和/src/defaultDirectory/contact.js

您可以在
中看到更多用法。您可以使用resolve alias来覆盖基于配置的文件解析（在本例中为品牌名称或回退到默认值）。下面是一个简单的例子：
const path = require('path');
const brand = process.env.BRAND;

// Then add this to your Webpack config
{
 ...
 resolve: {
   alias: {
     brand: brand
        ? path.resolve(__dirname, 'src', brand)
        : path.resolve(__dirname, 'src', 'defaultDirectory'), 'profile.js')
   }
 }
}

之后，当您需要捆绑某个品牌时，只需在环境变量中设置brand=somebrand
。每当您从“品牌/配置文件”导入配置文件时，和从“品牌/联系人”导入联系人时，将分别解析为/src/somebrand/Profile.js
和/src/somebrand/Contact.js
。如果没有定义品牌，它将退回到默认的/src/defaultDirectory/profile.js
和/src/defaultDirectory/contact.js

您可以在
中看到更多用法。为了完整起见，我想补充一点，Webpack中有一个用于路径覆盖的插件。他们明确提到，蒙皮是使用它的主要目的。它允许您定义一个覆盖路径，插件将查找覆盖目录中的所有文件实例，并返回到默认路径
在您的情况下，只需指定一个如下所示的覆盖：
//webpack.config.js
从“路径覆盖网页包插件”导入PathVerrideplugin
const webpackConfig={
插件：[
新的PathOverridePlugin（/whitelabel/，'brandname'）
]
}

当然，您应该根据项目的需要，使用适当的regexp
和string
值来代替白标签
和品牌名

我仍然喜欢选择的答案，但在某些情况下，这可能是一个更干净的解决方案。
为了完整起见，我想补充一点，Webpack中有一个用于路径覆盖的插件。他们明确提到，蒙皮是使用它的主要目的。它允许您定义一个覆盖路径，插件将查找覆盖目录中的所有文件实例，并返回到默认路径
在您的情况下，只需指定一个如下所示的覆盖：
//webpack.config.js
从“路径覆盖网页包插件”导入PathVerrideplugin
const webpackConfig={
插件：[
新的PathOverridePlugin（/whitelabel/，'brandname'）
]
}

当然，您应该根据项目的需要，使用适当的regexp
和string
值来代替白标签
和品牌名

我仍然喜欢选择的答案，但在某些情况下，这可能是一个更干净的解决方案。
据我所知，您将需要分别捆绑每个品牌，因此只需使用resolve.alias
并将品牌名称作为环境变量传递如何？如果可行，此时解决方案并不重要。那么@EvanSebastian我该怎么做呢？另外，我想强调一点：我有所有品牌的默认js文件。但是，如果需要，我应该覆盖某个品牌的默认名称。好的，我会在回答中写出来。根据我的理解，您需要单独捆绑每个品牌，那么简单地使用resolve.alias
并将品牌名称作为环境变量传递如何？如果可行，此时解决方案并不重要。那么@EvanSebastian我该怎么做呢？另外，我想强调一点：我有所有品牌的默认js文件。但是如果需要，我应该覆盖某个品牌的默认文件。好的，我会在回答中写出来谢谢你的帮助Evan，但我不知道需要覆盖哪个文件，它可以是另一个文件，如posts.js
怎么样？有没有一种通用的方法来修复它？是的，去掉$并将其更改为类似于品牌
。然后所有相关导入都将被覆盖，我会更新答案谢谢你的帮助Evan，但我不知道需要覆盖哪个文件，它可以是另一个文件，如posts.js
怎么样？有没有一种通用的方法来修复它？是的，去掉$并将其更改为类似于品牌
。然后将覆盖所有相关导入，我将更新答案