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的{{1}}和index.js的{{1}}能够导入project2和index.js。

目前，如果我这样做，这是有效的：

CommonComponent.vue

然而，这些导入路径开始变得非常混乱并且很难保持我们去的每棵树的更深处，有大量的app.js s，所以我试图找到一种方法来使导入更整洁更容易管理，我在webpack中遇到了resolve个选项。所以我尝试将其添加到我的import CommonComponent from ../../common/components/CommonComponent.vue：

../

所以导入看起来像是：

webpack.config.js

导入普通js文件有效，但在尝试导入resolve: { modules: [ path.resolve("../common/"), path.resolve("./node_modules") ] },文件时，webpack会抛出错误：

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

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

注意：从单个项目中导入ERROR in C:/parentDir/common/components/CommonComponent.vue Module not found: Error: Can't resolve 'vue-style-loader' in 'C:/parentDir/common/components'文件可以正常工作，因此我的resolve.modules配置是正确的。

Answer 1

事实证明，普通包需要自己的node_modules。从那里直接通过其路径导入文件时似乎不是这种情况，但是在webpack中使用resolve.modules或resolve.alias时就是这样。

所以答案是npm init中的common，然后是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导入的文件

1 个答案: