webpack 错误 configuration.module 有一个未知的属性 'loaders'答案

【问题标题】：webpack error configuration.module has an unknown property 'loaders'webpack 错误 configuration.module 有一个未知的属性 'loaders'
【发布时间】：2020-01-27 07:24:49
【问题描述】：

当我使用npm run start 运行服务器时，出现以下错误：

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

 - configuration has an unknown property 'debug'. These properties are valid:

   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }

   The 'debug' property was removed in webpack 2.0.0.

   Loaders should be updated to allow passing this option via loader options in module.rules.

   Until loaders are updated one can use the LoaderOptionsPlugin to switch loaders into debug mode:
   plugins: [
     new webpack.LoaderOptionsPlugin({
       debug: true
     })
   ]
 - configuration.module has an unknown property 'loaders'. These properties are valid:

   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }

   -> Options affecting the normal modules (`NormalModuleFactory`).

我的 webpack.config.js 如下：

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

module.exports = {
  entry: [
    './src/Main.js'
  ],
  output: { path: __dirname, filename: 'bundle.js' },
  cache: true,
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.glsl$/,
        loader: 'webpack-glsl',
        include: [
          path.resolve(__dirname, 'src', 'shaders')
        ]
      }
    ]
  },
  devServer: {
    compress: true,
    disableHostCheck: true,
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ]
};

【问题讨论】：

标签： javascript npm webpack loader

【解决方案1】：

你的 webpack 版本是多少？

至于 webpack 4 - 你需要从“loaders”改为“rules”

module: {
    rules: [
      { test: /\.glsl$/, use: 'webpack-glsl' }
    ]
  ...

希望这是您所期待的答案。

【讨论】：

我的 webpack 版本是 4.41.5，我试过你提到它解决了第二个错误，但第一个保持不变，你能帮我解决第一个错误“配置有一个未知属性”“调试” .这些属性有效：'
删除缓存属性下方的 debug: true 因为您已经将其添加到插件部分，其中它们是 debug: true。让我知道它是否有效并标记答案。
@HardikPurohit 如果您的问题得到解决，可以将问题标记为已关闭。谢谢

【解决方案2】：

您应该将加载器更改为 webpack 4 中的规则：

更改loaders

致rules。见Loaders

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

module.exports = {
  entry: [
    './src/Main.js'
  ],
  output: { path: __dirname, filename: 'bundle.js' },     
  devtool: 'source-map',
  module: {
   rules: [
  { test: /\.glsl$/, use: 'webpack-glsl' }
]
  },
  devServer: {
    compress: true,
    disableHostCheck: true,
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      debug: true
    })
  ]
};

查看调试属性。查看Debug

【讨论】：