webpack配置问题

Question

✖ ｢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-empty string | 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

源码：

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
  }
}

Answer 1

option: {minimize: true} 改为 options: {minimize: true}, 这种翻译性质的问题, 希望你下次自己解决.