Webpack初始化配置报错：存在未知属性'modules'，请求排查解决

咱们先把问题拆明白：你把modules配置放在了LoaderOptionsPlugin的options里，但Webpack的API根本不允许这么做，这就是报错的核心原因。

为什么会报错？ #

• LoaderOptionsPlugin这个插件的定位是给旧版loader传递专属配置，它的options字段是用来给loader传参的，不是用来放Webpack自身的顶层配置项的。
• 你想用的modules其实是Webpack顶层配置中resolve字段下的属性，作用是指定模块的搜索路径，完全不属于这个插件的配置范围。

修复后的正确配置 #

把modules从插件里移到Webpack配置的顶层resolve下，同时如果不需要兼容旧loader，甚至可以直接删掉LoaderOptionsPlugin（Webpack 4+已经废弃了这个插件的大部分用法）。

举个完整的示例：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 其他顶层配置比如mode、entry、output...
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 把modules放在这里！
  resolve: {
    modules: ['node_modules', path.resolve(__dirname, 'src')]
  },
  plugins: [
    // 如果确实需要兼容旧版loader，只放对应loader的配置
    new webpack.LoaderOptionsPlugin({
      options: {
        // 比如给旧版的less-loader传配置
        lessLoader: {
          strictMath: true
        }
      }
    })
  ]
};

额外优化建议（Webpack 4+） #

如果你的Webpack版本是4及以上，LoaderOptionsPlugin已经被官方废弃了，现在推荐直接在module.rules里给每个loader配置选项，这样更清晰也更符合现代规范：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              // 直接在这里写css-loader的配置
              modules: true // 如果是css模块化的需求，是在这里配置哦！
            }
          }
        ]
      }
    ]
  }
};

内容的提问来源于stack exchange，提问作者Dnyanesh ghuge