在开发模式下，Webpack（v 3.0.0）validateSchema错误

Question

昨天我安装了webpack-cli，它与react和其他软件包配合得很好，今天我只想再次设置我的webpack配置文件，但是当我通过npm运行webpack-dev-server时它只是吐出这个错误：

K:\web\07_Webpack_Test\node_modules\webpack-cli\bin\convert-argv.js:7
const validateSchema = process.webpackModule.validateSchema;
                                             ^

TypeError: Cannot read property 'validateSchema' of undefined
    at Object.<anonymous> (K:\web\07_Webpack_Test\node_modules\webpack-cli\bin\convert-argv.js:7:46)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (K:\web\07_Webpack_Test\node_modules\webpack-dev-server\bin\webpack-dev-server.js:234:15)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack-dev-server -d`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev 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!     C:\Users\Eric PC\AppData\Roaming\npm-cache\_logs\2018-06-02T07_12_22_842Z-debug.log

这是我运行它的命令：

 "scripts": {
    "dev": "webpack-dev-server -d",
    "build": "npm run clear && webpack -p",
    "clear": "rimraf ./public/*"
  },

这是我的webpack.config.js：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');


module.exports = {

  entry: {
    app: './src/js/app.jsx',
  },

  output: {
    path: path.resolve(__dirname , 'public'),
    filename: '[name].bundle.js'
  },

  module: {

    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        use : ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader' , 'sass-loader'],
          publicPath: "/public"
        })
      }
    ]

  },


  resolve: {
    extensions: ['.js', '.jsx'] 
  },


  plugins: [

    new HtmlWebpackPlugin({
      title: 'React App',
      filename: 'index.html',
      template: './src/index.html'
    }),

    new ExtractTextPlugin({
      filename: 'app.css',
      disable: false,
      allChunks: true
    })

  ],


  devServer: {
    contentBase: '/public',
    compress: true,
    port: 3000,
    open: true,
    historyApiFallback: true,
    stats: 'errors-only'
  }

}

在努力解决这个错误之后，我终于想通了webpack-cli的版本更改，昨天我安装了webpack-cli 2.1.4，今天我安装了version 3.0.0。我通过检查npm网站上的版本来解决这个问题，我发现它在发布webpack-cli version 3后仅仅过了5个小时：

我应该注意，当我运行npm run build它只是构建文件夹，一切正常，但我无法在开发模式下运行，并在浏览器中看到结果。

我知道如果我将我的webpack cli降级到以前的版本它必须有效，但问题是，这个错误是什么，我该如何解决？ （因为节点包经常更新，所以必须是最新的，对吧？）

Answer 1

新版本的webpack-cli将webpack添加到全局流程对象。这会导致webpack-dev-derver等应用程序崩溃，因为它假定process.webpackModule在当前进程中可用。

我已经创建了拉动请求以解决这个问题https://github.com/webpack/webpack-cli/pull/478

Answer 2

试试webpack-cli v3.0.1，我会工作的。

Answer 3

通过切换到新的webpack-serve（https://github.com/webpack-contrib/webpack-serve），我能够解决这个问题。

根据我的经验，这是一个非常简单的1-1替代品，只需要我改变用于将webpack-dev-server加载到webpack-serve的cli命令。

我已经打开了一个修改请求，这个请求应该在webpack-serve的自述文件中说明：https://github.com/webpack-contrib/webpack-serve/issues/158

Answer 4

过了一会儿，今天，我决定再次测试，我还没有看到这样的问题。我应该注意，今天当我安装webpack-cli时，npm安装了webpack cli版本"webpack-cli": "^3.0.3"，因为它似乎问题已经消失。

感谢webpack小组解决这个问题，谢谢大家回答：

@loveky和@jullian Tellez和@Even André Stensberg和@Jonny Asmar