Webpack-dev-server: TypeError: Cannot read property 'tap' of undefined

Created on 16 Apr 2018 · 7Comments · Source: webpack/webpack-dev-server

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\distindex.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-middlewareindex.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_modulesasync\libasync.js:52:16