为什么webpack包含依赖的node_modules？

Question

我在同一目录中有两个模块，均由 lerna js 管理。其中之一是其他模块包含的库。它们都是在 webpack 库创作之后由 webpack 打包的。

但是，当我在应用程序目录中启动 webpack 时，该过程包含应用程序内的所有库/node_modules 依赖项，例如 vue.js。在库 vue 中是“devDependency”，而在应用程序中是“dependency”。这意味着导航器中有两个 Vue 上下文。有人知道为什么吗？

谢谢。

Answer 1

您需要添加别名：

module.exports = {
...
....
},
resolve: {
    modules: ["node_modules",
    alias: {
        'vue$': 'vue/dist/vue',
        'jquery': 'jquery/dist/jquery.min.js'
    }
},
...

Answer 2

感谢@evocateur

“Node 在需要时解析符号链接，这意味着单例的库（如 React 和 Vue）将会损坏。您需要添加

resolve.alias

webpack 配置，以便它始终选择“根”

node_modules

包。”

在resolve.alias中放入以下webpack可以完美地工作：

vue: path.resolve(__dirname, './node_modules/vue/')

Answer 3

确保库和应用程序的 webpack 配置均已正确设置。请特别注意库的 webpack 配置中的外部配置。此配置允许您指定不应与您的库捆绑在一起的依赖项。 外部化依赖关系：

在库的 webpack 配置中，将 Vue.js 标记为外部依赖项。这意味着当捆绑库时，它不会包含 Vue.js，并且它会期望应用程序提供它。

// In your library's webpack.config.js
module.exports = {
  // ...
  externals: {
    vue: 'Vue', // Assuming Vue is available as a global variable
  },
};