Webpack - 子模块未正确解析

Question

我有一个项目，它使用当前版本的lodash 库 4.17.5。

该项目依赖另一个模块，它基本上是 codemirror 的精简版。
codemirrormodule 使用 JSHINT 作为它的依赖项，而 JSHINT 依赖于lodash 版本 3.x。

现在，由于我的项目中有一个 lodash 4.x 版本，每当在 JSHINT 中调用 require 时，它​​都需要一个 4.x 版本而不是 3.x 版本，并抱怨缺少 lodash 4 不再支持的方法。X。

这是我的 npm ls 命令输出的一部分。在我的 node_modules/lodash 我有一个 lodash 4.x 版本而在我的 node_modules/jshint/node_modules/lodah 是 3.x 版本

我使用 webpack 3.11.0

我的 webpack 配置：

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsRoot,
  publicPath: process.env.NODE_ENV === 'production' ? "." + 
  config.build.assetsPublicPath : config.dev.assetsPublicPath,
  filename: '[name].js'
},
 resolve: {
extensions: ['.js', '.vue'],
alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components'),
  'scss': path.resolve(__dirname, '../src/scss'),
  'services': path.resolve(__dirname, '../src/services'),
  'ui': path.resolve(__dirname, '../src/components/UI'),
  'utility': path.resolve(__dirname, '../src/util.js'),
   // This is a hack which solves the issue, but still a hack.
  'lodash4': path.resolve(__dirname, '../node_modules/lodash'),
  'lodash': path.resolve(__dirname, '../node_modules/jshint/node_modules/lodash'),
},
modules: [
  path.join(__dirname, '../node_modules')
]
},
resolveLoader: {
modules: [
  path.join(__dirname, '../node_modules')
],
},
module: {
 rules: [
  {
    test: /\.vue$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    enforce: 'pre',
    loader: 'eslint-loader',
    include: projectRoot,
    exclude: /node_modules/
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader'
  },
  {
    test: /\.(js|js.flow)$/,
    loader: 'babel-loader',
    include: projectRoot,
    exclude: /node_modules/,
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]
},
plugins: [
 new webpack.LoaderOptionsPlugin({
  options: {
    eslint: {
      formatter: require('eslint-friendly-formatter')
    },
    vue: {
      loaders: utils.cssLoaders(),
      postcss: [
        require('autoprefixer')({
          browsers: ['last 2 versions']
        })
      ]
    }
  }
})
]
}

有什么方法可以指定在主项目中使用哪个库版本，以及在具有较低版本作为依赖项的子模块中使用哪个库版本？它不应该默认发生吗？

我发现可以通过为较新的 lodash 版本使用别名来完成，但这听起来不是一个合适的解决方案。

Answer 1

我在 webpack github 页面#6505上得到了帮助。

基本上我错误地配置了 node_modules 解析器：
这强制所有模块从根 node_modules ONLY解析。

modules: [
  path.join(__dirname, '../node_modules')
]

正确：
这是默认的分层node_modules 分辨率。你可以省略这个。

modules: [
  'node_modules'
]