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

Question

当我运行服务器使用 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
    })
  ]
};

Answer 1

你的 webpack 版本是多少？

至于 webpack 4 - 你需要从 "loaders" 更改为 "rules"

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

希望这是您期待的答案。

Answer 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
    })
  ]
};

查看调试property.SeeDebug

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

webpack error configuration.module has an unknown property 'loaders'

javascript

loader

npm

webpack

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

webpack error configuration.module has an unknown property 'loaders'

javascript

loader

npm

webpack

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