Webpack 配置不接受配置模式选项

Question

**尝试将模式选项添加到 webpack 配置时出现错误我需要通过查看此答案 github.com/webpack-contrib/webpack-hot-middleware/ 来配置 {mode:'developement'} 以启用 hmp问题/... **

WebpackOptionsValidationError：配置对象无效。网页包 已使用不匹配的配置对象初始化 API 架构。 - 配置具有未知属性“模式”。这些属性是有效的： 对象{amd？，保释？，缓存？，上下文？，依赖关系？，devServer？，devtool？，条目，外部？，加载器？，模块？，名称？， 节点？，输出？，性能？，插件？，配置文件？，记录输入路径？， recordsOutputPath?，recordsPath?，resolve?，resolveLoader?，stats?， 目标？，看？，看选项？ } 错别字：请更正。 对于加载器选项：webpack 2 不再允许配置中的自定义属性。 应该更新加载器以允许通过 module.rules 中的加载器选项传递选项。 在更新加载器之前，可以使用 LoaderOptionsPlugin 将这些选项传递给加载器： 插件：[ 新的 webpack.LoaderOptionsPlugin({ // test: /.xxx$/, // 可能仅适用于某些模块 选项： { 模式： ... } }) ] 在 webpack (C:\Users\asdf\WebstormProjects\node_modules\webpack\lib\webpack.js:19:9) 在对象。 ( 在 Module._compile (internal/modules/cjs/loader.js:689:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) 在 Module.load (internal/modules/cjs/loader.js:599:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:538:12) 在 Function.Module._load (internal/modules/cjs/loader.js:530:3) 在 Function.Module.runMain (internal/modules/cjs/loader.js:742:12) 启动时（内部/bootstrap/node.js:282:19） 在 bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)

    /* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const commonConfig = require('./webpack.config.common');

module.exports = webpackMerge(
  commonConfig,
  {
    devtool: 'cheap-module-eval-source-map',
    entry: {
      main: ['babel-polyfill', 'webpack-hot-middleware/client', './app/index.js'],
    },
    output: {
      path: __dirname,
      publicPath: '/',
      filename: '[hash].bundle.js',
    },
    module: {
      rules: [
        {
          test: /\.mspcss/,
          use: [
            'style-loader',
            'css-loader?modules=true&importLoaders=1&localIdentName=[local]___[hash:base64:5]',
            'resolve-url-loader',
            'sass-loader?sourceMap'
          ]
        },
        {
          test: /\.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader?sourceMap']
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify('development'),
          BABEL_ENV: JSON.stringify('development'),
        },
        __DEV__: true,
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.NoErrorsPlugin(),
      new HtmlWebpackPlugin({
        title: 'some- Development',
        template: path.resolve(__dirname, 'index.ejs'),
        filename: path.resolve(__dirname, 'index.html'),
        favicon: 'favicon.ico',
        inject: 'body'
      }),

    ]
  }
)
/* eslint-enable */

Answer 1

你使用的是什么版本的 webpack？您可能使用的是版本 2 或 3，并且最新版本的 webpack-dev-server (3.2.1) 以 webpack 4 为目标。我遇到了同样的问题并通过安装 webpack-dev-server 版本 2.11.5 修复了它

npm uninstall webpack-dev-server
npm i -D webpack-dev-server@2.11.5