如何通过 JHipster 中的 webpack 配置替换文件夹中的文件？答案

【问题标题】：How to replace files in a folder by webpack's config in JHipster?如何通过 JHipster 中的 webpack 配置替换文件夹中的文件？
【发布时间】：2020-04-15 01:14:34
【问题描述】：

我想用 JHipster 中的 webpack 配置替换文件夹中的文件。例如，dev-config 将“webapp/app/home”文件夹中的文件替换为“environments/dev/home”。

我知道纯Angular中的@angular-devkit/build-angular:browser可以替换配置中的文件，但在JHipster中没有使用，并且似乎无法替换文件夹中的文件。

【问题讨论】：

这不是 JHipster 在 webpack/webpack.common.js 中使用 copy-webpack-plugin 所做的吗？
感谢您的回复。作为您的建议，我添加了一个仅用于 Angular 组件 html 的参数，但它似乎没有被编译。 copy-webpack-plugin 会在编译前复制文件吗？
应该可以，不知道能不能改，见github.com/webpack-contrib/copy-webpack-plugin/issues/195。
在“webpack:dev”和“webpack:prod”中的package.json中调用webpack之前，你有没有考虑过这样做，而不是使用webpack来做？虽然，如果您必须在 webpack 中执行此操作，您可以定义一个常量并在您的组件或模板中对其进行测试，但这是一种常见的做法，JHipster 已经使用 webpack.DefinePlugin 完成了。

标签： angular webpack jhipster

【解决方案1】：

感谢您的帮助，但我无法理解您的建议。

最后，我决定将所有文件放在一个文件夹下，并在 AngularCompilerPlugin 中设置为 hostReplacementPaths。

我写的如下。

租户-util.js

const TENANT_ARG_KEY = '--tenant=';

module.exports = {
    getTenant
};

/**
 * webpack arg example： --tenant=company1
 * @param {string[]} argv process.argv
 */
function getTenant(argv /* : string[] */) /* : string */ {
    if (!Array.isArray(argv)) {
        return '';
    }

    for (let i = 0; i < argv.length; ++i) {
        if (!argv[i].startsWith(TENANT_ARG_KEY)) {
            continue;
        }
        return argv[i].substr(TENANT_ARG_KEY.length);
    }

    return '';
}

webpack.common.js

const tenantUtils = require('./tenant-utils');
const tenant = tenantUtils.getTenant(process.argv);

const hostReplacementPaths = {};
if (tenant) {
    const glob = require('glob');
    const replaceToFolder = `environments/${tenant}`;
    const filenamesInEnvironment = glob.sync(`./src/${replaceToFolder}/**/*.*`);
    if (!filenamesInEnvironment) {
        throw Error('check the tenant setting');
    }
    for (const filename of filenamesInEnvironment) {
        const originalFilename = filename.replace(replaceToFolder, 'main/webapp')
        hostReplacementPaths[originalFilename] = filename;
    }
}


...
        new AngularCompilerPlugin({
            mainPath: utils.root('src/main/webapp/app/app.main.ts'),
            tsConfigPath: utils.root('tsconfig.app.json'),
            sourceMap: true,
            hostReplacementPaths: hostReplacementPaths
        }),

【讨论】：