1

背景

@angular-builders/custom-webpack允许我们自定义 Angular 构建的 webpack 配置，这里有教程。我正在使用它来构建 Web 扩展（Chrome/Firefox）的附加脚本。

这是extra.webpack.config.js我包含在angular.json

const { resolve } = require('path');

const scriptsDir = __dirname;

module.exports = {
  entry: {
    "background-script": resolve(scriptsDir, 'background-script/boot.ts'),
    "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts')],
    "site-bridge": resolve(scriptsDir, 'site-bridge/boot.ts')
  }
};

正如预期的那样，它输出background-script.js，fill-manager.js并site-bridge.js与角度构建工件一起输出。由于这个 webpack 配置与 angular 的 webpack 配置合并，我们可以从一个angular.json文件中控制所有优化、散列、源映射等。

问题

我还想捆绑附加的 css 文件，这些文件将与扩展脚本一起使用并由 angular build 控制。

我也许可以添加特定的规则、加载器等，extra.webpack.config.js但我不想处理 postcss、autoprefixer 和 sass 加载器等，因为它已经在 angular 内部完成了。

就像脚本文件一样，只是在里面添加 css 条目extra.webpack.config.js不会产生 css 文件，即

module.exports = {
  entry: {
    ...
    "fill-manager": [resolve(scriptsDir, 'fill-manager/boot.ts'), resolve(scriptsDir, 'fill-manager/main.css')],
    ...
  }
};

有没有一种方法可以让我指定一个 css/scss 文件条目extra.webpack.config.js，它只是使用基于角度的配置输出一个捆绑的 css 文件？

4

0 回答 0