Question

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

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

我想使用默认文件覆盖特定于品牌的Javascript文件（两个文件具有相同的名称 - 例如，每个文件夹都有一个profile.js文件），而在Webpack上正在进行捆绑。我找到了一种方法，即普通模块替换，但我无法实现。

我该怎么办？有人可以分享一个示例Webpack配置吗？

Answer 1

您可以使用解析别名来覆盖基于配置的文件解析（在这种情况下，品牌名称或回退到默认值）。这是一个简单的例子：

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即可。每当您执行import Profile from 'brand/profile'和import Contact from 'brand/contact'时，它将分别解析为./src/somebrand/profile.js和./src/somebrand/contact.js。如果未定义BRAND，它将回退到默认./src/defaultDirectory/profile.js和./src/defaultDirectory/contact.js。

您可以在documentation

中查看更多用法

Answer 2

为了完整起见，我想补充一点，路径覆盖在Webpack ：path-override-webpack-plugin中有一个插件。他们明确提到 skinning 是使用它的主要目的。它允许您定义覆盖路径，插件将在覆盖目录中查找文件的所有实例，并回退到默认路径。

在您的情况下，您只需指定一个覆盖：

// webpack.config.js
import PathOverridePlugin from 'path-override-webpack-plugin'

const webpackConfig = {
    plugins: [
        new PathOverridePlugin(/whitelabel/, 'brandname')
    ]
}

当然，根据您的项目需要，您应该使用适当的regexp和string值代替whitelabel和brandname。

我仍然喜欢所选择的答案，但在某些情况下这可能是一个更清洁的解决方案。

Webpack Normal Module替换品牌

2 个答案: