Webpack configuration issu

"wds": Invalid configuration object. Webpack has been initialised using a configuration object thatdoes not match the API schema.

  • configuration.module.rules [1] .use should be one of these:
    non-emptystring | function | object {loader?, options?, ident?, query?} | function | [non-emptystring | function | object {loader?, options?, ident?, query?}]
    -> Modifiers applied to the module when rule is matched
    Details:

    • configuration.module.rules [1] .use should be a string.
    • configuration.module.rules [1] .use should be an instance of function
    • configuration.module.rules [1] .use should be an object.
    • configuration.module.rules [1] .use should be an instance of function
    • configuration.module.rules [1] .use [0] should be a string.
    • configuration.module.rules [1] .use [0] should be an instance of function
    • configuration.module.rules [1] .use [0] has an unknown property "option". These properties are valid:
      object {loader?, options?, ident?, query?}

npm err! Code ELIFECYCLE
npm err! Errno 1
npm err! React-myself@1.0.0 start: webpack-dev-server-- mode development-- open
npm err! Exit status 1
npm err!
npm err! Failed at the react-myself@1.0.0 start script.
npm err! This is probably not a problem with npm. There is likely additional logging output above.

npm err! A complete log of this run can be found in:
npm err! / Users/hhf/.npm/_logs/2018-06-29T01_33_38_421Z-debug.log

Source code:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const webpack = require("webpack")
module.exports = {
  // entry: "./src/main.js",
  // output:{
  //   path:path.resolve(__dirname,"/dist/js"),
  //   filename:"[name].js"
  // },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            option: {minimize: true}
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8033,
    host: "127.0.0.1",
    hot: true
  }
}
Mar.22,2021

option: {minimize: true} is changed to options: {minimize: true} . I hope you can solve this translation problem by yourself next time.

Menu