开发模式下的 Webpack (v 3.0.0) validateSchema 错误

Question

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

K:\web_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_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_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! 07_webpack_test@1.0.0 dev: `webpack-dev-server -d`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the 07_webpack_test@1.0.0 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\_logs18-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 降级到以前的版本，它一定可以工作，但问题是，这个错误是什么，我该如何解决？（由于 Node 包经常更新，因此有必要保持最新，对吗？）

Answer 1

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

我也创建了一个拉取请求来解决这个问题 https://github.com/webpack/webpack-cli/pull/478

Answer 2

我可以通过切换到新的 webpack-serve (https://github.com/webpack-contrib/webpack-serve) 来解决这个问题。

根据我的经验，这是一个非常简单的 1-1 直接替换，只需要我将用于加载 webpack-dev-server 的 cli 命令更改为 webpack-serve。

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

Answer 3

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

Answer 4

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

感谢webpack群解决，感谢大家的解答：

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

开发模式下的 Webpack (v 3.0.0) validateSchema 错误

Webpack (v 3.0.0) validateSchema error in dev mode

npm

reactjs

webpack

webpack-dev-server