Webpack配置不接受配置模式選項

Question

**嘗試將模式選項添加到webpack配置時出現錯誤，我需要通過查看此答案github.com/webpack-contrib/webpack-hot-middleware/issues/…配置{mode：'development'}以啟用hmp。 **

WebpackOptionsValidationError：無效的配置對象。 已使用與API模式不匹配的配置對象初始化Webpack。 -配置具有未知屬性“模式”。 這些屬性是有效的：對象{amd？，bail？，cache？，context？，dependencies？，devServer？，devtool？，entry，externals？，loader？，module？，name？，node？，output？，performance?。 ，插件，配置文件，recordsInputPath，recordsOutputPath，recordsPath，resolve，resolveLoader，stats，target，watch，watchOptions？ }對於錯別字：請更正它們。 對於加載程序選項：webpack 2不再允許配置中的自定義屬性。 應該更新加載程序，以允許通過module.rules中的加載程序選項傳遞選項。 在更新加載程序之前，可以使用LoaderOptionsPlugin將這些選項傳遞給加載程序：插件：[new webpack.LoaderOptionsPlugin（{//測試：/.xxx$/，//可能僅將此功能應用於某些模塊選項：{模式： ...}}）]），位於對象的webpack上（C：\\ Users \\ asdf \\ WebstormProjects \\ node_modules \\ webpack \\ lib \\ webpack.js：19：9）。 （在Module.load（內部）在Object.Module._extensions..js（內部/模塊/cjs/loader.js:700:10）在Module._compile（內部/模塊/cjs/loader.js:689:30）在Function.Module._load（內部/模塊/cjs/loader.js:530:3）的tryModuleLoad（內部/模塊/cjs/loader.js:538:12）的/modules/cjs/loader.js:599:32） ）在BootstrapNodeJSCore（internal / bootstrap / node.js：743）的啟動時（Internal / bootstrap / node.js：282：19）在Function.Module.runMain（internal / modules / cjs / loader.js：742：12）處： 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）則針對webpack4。我遇到了同樣的問題，並通過安裝2.11.5版的webpack-dev-server進行了修復。

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