遇到webpack模块解析问题

Question

我安装了全局npm模块，我们称它为abc-cli。现在，我有一个app运行此命令的反应：abc-cli run。

abc-cli基本上要做的是获取中的组件，app并使用其源代码对其进行编译和运行。

现在，我想将其发布app为单独的npm模块。因此，我正在使用Webpack生成捆绑包。解析模块时，webpack无法解析属于模块的模块abc-cli。显而易见，webpack不知道是什么abc-cli。

所以我的问题是我如何确保webpack解决模块依赖关系？有什么办法可以使webpack abc-cli在捆绑时运行/编译。

或最坏的情况可能是如何抑制模块分辨率警告或忽略那些模块。因为我知道它将会存在。

例：

在我的中app，我有一个进口声明为

import SomeComponent from '@abc/components';

现在，在捆绑时，Webpack不会解析此模块：

Module not found: Error: Can't resolve '@abc/components' in '/home/shishir/app/src/shared/visualizations'

如果我能解决这个问题，那将是很大的帮助。

我的webpack配置：

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.mjs', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'es2015',
              'react',
              'stage-2'
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

我尝试了null加载器：

{
        test: require.resolve("@abc/components"),
        use: 'null-loader'
}

但它没有帮助。

Answer 1

这是通知Webpack额外位置以查找模块的两种方法。

// webpack.config.js

module.exports = {
  //...
  resolve: {
    // 1. add extra `node_modules` directory to search path
    modules: ['node_modules', '/abs_path/to/global/node_modules'],
    // 2. use alias to explicitly map a module name to its exact location
    alias: {
      '@abc': '/abs_path/to/global/node_modules/@abc'
    }
  }
};

对于您的用例，如果仅@abc模块位于常规本地node_modules目录之外，则建议您使用resolve.alias。

来源：https : //webpack.js.org/configuration/resolve/#resolvemodules。