将加载程序应用于通过 webpack 中的 resolve.modules 导入的文件

Question

我在一个父目录的不同目录中有两个 javascript 项目，我希望它们都能够从公共目录导入文件。结构看起来有点像这样：

- parentDir
  - project1
    - package.json
    - webpack.config.js
    - src
      - index.js
  - project2
    - package.json
    - webpack.config.js
    - src
      - index.js
  - common
    - components
      - CommonComponent.vue
    - application
      - app.js

我希望 project1 的 index.js 和 project2 的 index.js 能够导入 CommonComponent.vue 和 app.js.

目前如果我这样做就可以了：

import CommonComponent from ../../common/components/CommonComponent.vue

然而，这些导入路径开始变得非常混乱并且难以维护我们进入的每棵树的更深处，有大量的 ../s，所以我试图找到一种方法来进行导入更整洁，更易于管理，我在 webpack 中遇到了 resolve 选项。所以我尝试将其添加到我的 webpack.config.js:

resolve: {
    modules: [
        path.resolve("../common/"),
        path.resolve("./node_modules")
    ]
},

那么导入看起来像：

import CommonComponent from "components/CommonComponent.vue"
import app from "application/app"

导入纯 js 文件有效，但是当尝试导入 .vue 文件时，webpack 抛出错误：

ERROR in C:/parentDir/common/components/CommonComponent.vue
Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'

那么如何将 webpack 加载器应用于通过 resolve.modules 导入的文件？

注意：从单个项目中导入 .vue 文件工作正常，所以我的 module.rules 配置是正确的。

Answer 1

事实证明，通用包需要自己的包 node_modules。当直接通过路径从那里导入文件时，情况似乎并非如此，但在 webpack 中使用 resolve.modules 或 resolve.alias 时会出现这种情况。

所以答案是 common 中的 npm init 然后 npm install 那里需要的所有依赖项和 devDependencies。例如（当然这些将取决于项目）：

npm install --save vue
npm install --save-dev babel-core babel-loader css-loader less-loader vue-loader vue-template-compiler webpack

完成后，据我所知，这两个 webpack 配置似乎具有相同的结果：

resolve: {
    modules: [
        path.resolve("../../common"),
        path.resolve("./node_modules")
    ]
},

和

resolve: {
    alias: {
        components: path.resolve("../../common/components")
    }
}

两者都允许 project1 或 project2 中的文件进行导入，例如：

import CommonComponent from "components/CommonComponent.vue"

将加载程序应用于通过 webpack 中的 resolve.modules 导入的文件

Applying loaders to files imported via resolve.modules in webpack

javascript

webpack

vue-loader