为不同的组件使用多个 webpack

编程问答 2022-09-01

问题描述

我正在处理一个 Electron 项目，该项目涉及一个带有 webpack 的主窗口，以及其他几个需要运行自己的 webpack 的组件。

目前我通过将 less.js 添加到 webpack.renderer.config.js 中的 webpack.rules.js 来在主窗口上工作（将它添加到 webpack.rules.js 中会直接导致问题）。在我安装了 less.js 并将加载器添加到它的 webpack 之后，我想添加 less.js 的组件也可以独立运行。

问题是，当我运行整个应用程序时，在组件中加载 .less 文件时发生错误，因为它找不到 less-loader 规则 (Error: Module parse Failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type)。当我将规则直接添加到主 webpack 文件时，此问题已修复，但最终会破坏主窗口 (ReferenceError: document is not defined at Object.e.exports) 中的其他内容。

在通过 webpack.renderer.config.js 将 less-loader 规则添加到 webpack.rules.js 后，我有什么方法可以加载其他组件吗？

注意：我查看了代码，看起来主窗口中的 renderer.ts 在创建另一个组件的实例之前加载了一个 .less 文件本身，所以规则应该已经加载了，但不管怎样原因是它不适用于其他组件中的 .less 文件。

主窗口 webpack.renderer.config.js

const rules = require('./webpack.rules');

rules.push({
  test: /\.less$/,use: [{loader: 'style-loader'},{loader: 'css-loader'},{loader: 'less-loader'}],});

renderer.ts

import './blah.less';

...

const componentwindow = new Componentwindow();
...

Componentwindow.ts

import './componentwindow.less';

export class Componentwindow {
...
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

electronelectronjavascriptlesswebpackwebpackwebpack