Question

在js项目中，通常的做法是配置webpack来解析相对于项目根目录的文件：

project1/
    webpack.config.js
    src/
        components/
            Component.js
        assets/
            jss/
                styles.js

project2/
    webpack.config.js
    src/
        components/
            Component.js
        assets/
            jss/
                styles.js

每个项目的Component.js都可以要求其自己的styles.js和import styles from 'assets/jss/styles.js'

我正在开发一个主应用程序和两个组件库，它们的结构与前面的示例相同。我想保持库的结构不变。

库和主应用程序应该是独立的项目。

但是，在开发时，我想同时使用树项目，利用Webpack功能，例如监视文件中的更改和热重载。

我的第一次尝试是仅使用主应用程序的webpack配置文件并按如下方式配置解析器引擎：

resolve: {
    ...
    modules: [
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'lib/project1/src'),
        path.resolve(__dirname, 'lib/project2/src'),
        'node_modules',
    ],
    alias: [
        'project1': path.resolve(__dirname, 'lib/project1/src/'),
        'project2': path.resolve(__dirname, 'lib/project2/src/'),
    ],
    ...
},

这样，我可以通过别名从project1或project2中请求任何文件，并且可以解析project1和project2中的引用，但是似乎基于resolve.modules数组的顺序具有优先级，因此import styles from 'assets/jss/styles.js'在project2中解析为project1的assets/jss/styles.js。

第一个问题：是否有任何方法可以配置解析器以解析源文件中的“最接近的”候选者？我认为这将是一个很棒的功能。

第二个问题：是否有办法“连接”两个Webpack进程，并要求另一个输出？一次在多个项目中工作并不少见。

Webpack可同时处理多个相关项目

0 个答案: