小编Har*_*tel的帖子

我是 webpack 的新手。目前我正在使用 webpack 开发 angular2 应用程序。作为要求的一部分，我们希望有一个不应捆绑的设置文件，以便在捆绑后也可以更改 settings.js 文件中的 URL。

下面是两个文件的代码。

设置.ts

const foo = {
    url:'localhost'
};
export { foo };

脚本文件

import { foo }  from 'settings';

两个 ts 文件都将在 bundle 之前编译为 js 文件。现在我想从包中排除 settings.ts 文件，并想在 dist 文件夹中单独复制 setting.ts 文件。

下面是 webpack.config 文件

loaders: [

            {
                test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 
                          'angular2-template-loader'],
                exclude: [/\settings.ts$/]
            },
]

我发现这没有运气。

我可以使用 CopyWebpackPlugin 复制 dist 文件夹中的 settings.js 文件。但无法从捆绑中排除 settings.ts 文件。

下面是文件夹结构的截图。Webpack.config 与 src 文件夹在同一级别

我正在使用以下包开发带有 webpack5 和 Angular 11 的模块联合原型。

https://www.npmjs.com/package/@angular-architects/module-federation

使用样式时此包存在一个已知问题。

styleUrls 的错误 目前，不幸的是，实验性 CLI/webpack5 集成中存在一个错误，导致在将共享库与指向 styleUrls 的组件一起使用时出现问题。目前，您可以通过删除应用程序和库中的所有 styleUrl 来解决此问题。

因此，解决方案是将所有 css 放入带有标签的 HTML 中。

就我而言，我有使用 SCSS 的现有项目。如果我想使用这个给定的包来使用微前端，我必须迁移 CSS 中的所有 SCSS 并将其放入 HTML 文件中，这是一项非常艰巨的任务。

问题：有没有更好的方法来处理 SCSS 以及具有使用 @angular-architects/module-federation 包的微前端的项目？