TypeError: Cannot read property 'tap' of undefined

[end-candle]

• Operating System: Windows 10 1709
• Node Version: v9.11.1
• NPM Version: 5.6.0
• webpack Version: 4.0.0-beta.1
• webpack-dev-server Version: 3.1.3
  webpack.base.js
  `
  const webpack = require('webpack');
  const path = require('path');

/*

• CSS兼容性调整
  */
  const autoprefixer = require('autoprefixer');
  const precss = require('precss');

/*

• 多个css文件打包为一个css文件
  */
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/**

• 清除发布版本文件夹
  */
  const CleanWebpackPlugin = require('clean-webpack-plugin');

/**

• html入口模板配置插件
  */
  const HtmlWebpackPlugin = require('html-webpack-plugin');

const baseConfig = {
// 入口配置
entry: './src/app.js',

module: {
rules: [{
test: /.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',

  options: {
    presets: ['env', 'es2015'],
  },
},
{
  test: /\.css$/,

  use: [{
    loader: MiniCssExtractPlugin.loader,
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: true,
      importLoaders: 1,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [precss, autoprefixer({
        // autoprefixer浏览器兼容配置
        browsers: [
          '>1%',
          'last 5 version',
          'ie >= 8',
          'ios >= 7',
          'android >= 4',
          'firefox >= 20',
          'chrome >= 40',
          'Safari >= 6',
        ],
      })],
    },
  },
  ],
},
],

},

plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({ template: 'app.html', filename: 'index.html' }),
new webpack.BannerPlugin('版权所有，翻版必究！'),
],
};

module.exports = baseConfig;
webpack.dev.js
const webpack = require('webpack');
const path = require('path');

/*

• CSS兼容性调整
  */
  const autoprefixer = require('autoprefixer');
  const precss = require('precss');

/*

• 多个css文件打包为一个css文件
  */
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

/**

• 清除发布版本文件夹
  */
  const CleanWebpackPlugin = require('clean-webpack-plugin');

/**

• html入口模板配置插件
  */
  const HtmlWebpackPlugin = require('html-webpack-plugin');

const baseConfig = {
// 入口配置
entry: './src/app.js',

module: {
rules: [{
test: /.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',

  options: {
    presets: ['env', 'es2015'],
  },
},
{
  test: /\.css$/,

  use: [{
    loader: MiniCssExtractPlugin.loader,
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: true,
      importLoaders: 1,
    },
  },
  {
    loader: 'postcss-loader',
    options: {
      plugins: [precss, autoprefixer({
        // autoprefixer浏览器兼容配置
        browsers: [
          '>1%',
          'last 5 version',
          'ie >= 8',
          'ios >= 7',
          'android >= 4',
          'firefox >= 20',
          'chrome >= 40',
          'Safari >= 6',
        ],
      })],
    },
  },
  ],
},
],

},

plugins: [
new CleanWebpackPlugin('dist'),
new HtmlWebpackPlugin({ template: 'app.html', filename: 'index.html' }),
new webpack.BannerPlugin('版权所有，翻版必究！'),
],
};

module.exports = baseConfig;
`
Actual Behavior
When attempting to run the webpack-dev-server, an error is being thrown:
PS E:\study\web\webpack-demo> webpack-dev-server --open --config webpack.dev.js
clean-webpack-plugin: E:\study\web\webpack-demo\dist has been removed.
E:\repositories\node\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js:405
throw e;
^

TypeError: Cannot read property 'tap' of undefined
at compiler.hooks.thisCompilation.tap.compilation (E:\study\web\webpack-demo\node_modules\mini-css-extract-plugin\dist\index.js:198:37)
at SyncHook.eval [as call] (eval at create (E:\repositories\node\node_global\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:17:12), :7:1)
at SyncHook.lazyCompileHook [as _call] (E:\repositories\node\node_global\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
at Compiler.newCompilation (E:\repositories\node\node_global\node_modules\webpack\lib\Compiler.js:406:30)
at hooks.beforeCompile.callAsync.err (E:\repositories\node\node_global\node_modules\webpack\lib\Compiler.js:439:29)
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\repositories\node\node_global\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (E:\repositories\node\node_global\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
at Compiler.compile (E:\repositories\node\node_global\node_modules\webpack\lib\Compiler.js:434:28)
at compiler.hooks.watchRun.callAsync.err (E:\repositories\node\node_global\node_modules\webpack\lib\Watching.js:76:18)
at AsyncSeriesHook.eval [as callAsync] (eval at create (E:\repositories\node\node_global\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:24:12), :15:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (E:\repositories\node\node_global\node_modules\webpack\node_modules\tapable\lib\Hook.js:35:21)
at Watching._go (E:\repositories\node\node_global\node_modules\webpack\lib\Watching.js:39:32)
at Watching.compiler.readRecords.err (E:\repositories\node\node_global\node_modules\webpack\lib\Watching.js:31:9)
at Compiler.readRecords (E:\repositories\node\node_global\node_modules\webpack\lib\Compiler.js:331:11)
at new Watching (E:\repositories\node\node_global\node_modules\webpack\lib\Watching.js:28:17)
at Compiler.watch (E:\repositories\node\node_global\node_modules\webpack\lib\Compiler.js:161:10)
at wdm (E:\repositories\node\node_global\node_modules\webpack-dev-server\node_modules\webpack-dev-middleware\index.js:50:31)
at new Server (E:\repositories\node\node_global\node_modules\webpack-dev-server\lib\Server.js:95:21)
at startDevServer (E:\repositories\node\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js:398:14)
at portfinder.getPort (E:\repositories\node\node_global\node_modules\webpack-dev-server\bin\webpack-dev-server.js:369:5)
at E:\repositories\node\node_global\node_modules\webpack-dev-server\node_modules\portfinder\lib\portfinder.js:160:14
at E:\repositories\node\node_global\node_modules\webpack-dev-server\node_modules\async\lib\async.js:52:16

[end-candle]

but in webpack version 4.5.0.
it is success.

[SpaceK33z]

As you say, in the latest version it works, there is no point in using an old beta of webpack.

[ScriptedAlchemy]

Seems this may no longer be the case? Can anyone confirm it working with webpack 4.8

[kongshanchat]

set "html-webpack-plugin": "^4.0.0-alpha" => "4.0.0-alpha"
remove node_modules
remove package-lock.json
npm install

[jbnv]

Reinstalling the packages and rebuilding packages-lock didn't work for me. I'm running Laravel Mix 4.1.4.

[mtwxt]

全局安装的插件和局部安装的插件冲突了。我全局安装webpack然后又局部安装，把局部的下载掉就好了

[zherar7ordoya]

set "html-webpack-plugin": "^4.0.0-alpha" => "4.0.0-alpha"
remove node_modules
remove package-lock.json
npm install

Thank you so much! Working like a charm...