Webpack 开发服务器 - 弃用警告：不推荐使用“编译器”作为第一个参数

Question

我从 webpack 开发服务器 3.11.2 升级到 4.4.0，并在 npm run dev 上收到这些已弃用的警告：

"dev": "webpack serve --config webpack.dev.js",

(node:33156) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument. (node:33156) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use async 'start' or 'startCallback' methods

我什至在配置中都没有new WebpackDevServer 来更改选项和编译器的顺序，我也没有使用listen()。我不明白为什么会收到这些警告或如何解决它们。

有谁知道如何解决这些警告？谢谢！

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const env = process.env.NODE_ENV || 'development';

module.exports = {
  output: {
    path: path.resolve(__dirname, `dist/${env}`),
    filename: '[name]-[fullhash].js',
    publicPath: '/', // used for routing
  },
  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    alias: {
      components: path.resolve(__dirname, './src/components'),
      store: path.resolve(__dirname, './src/store'),
      helpers: path.resolve(__dirname, './src/helpers'),
      constants: path.resolve(__dirname, './src/constants'),
      config: path.resolve(__dirname, './src/config'),
    },
    fallback: {
      fs: false,
      tls: false,
      net: false,
      path: false,
      zlib: false,
      http: false,
      https: false,
      stream: false,
      crypto: false,
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: {
          loader: 'babel-loader',
        },
        exclude: [/node_modules/],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
        use: {
          loader: 'url-loader',
        },
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true, // cache busting
      template: 'public/index.html',
      favicon: './public/favicon.ico',
    }),
    // creates a separate style.css file instead of adding the styles to the bundle.js
    new MiniCssExtractPlugin({
      filename: '[name].[fullhash].css',
      chunkFilename: '[id].[fullhash].css',
    }),
    new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: [`dist/${env}`] }),
    new CopyWebpackPlugin({
      patterns: [{ from: 'src/server', to: 'server' }],
    }),
  ],
};

webpack.dev.js

require('dotenv-override').config({ override: true });
const express = require('express');
const { merge } = require('webpack-merge');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const common = require('./webpack.common');
const setupProxy = require('./src/server/proxy');
const loggingEndpoint = require('./src/server/logging/loggingEndpoint');

module.exports = merge(common, {
  mode: 'development',
  devServer: {
    // inline: true, // refreshes the page on change
    open: true,
    port: 8081,
    historyApiFallback: {
      index: '/', // used for routing (404 response), and address bar routing
    },
    onBeforeSetupMiddleware: (server) => {
      setupProxy(server.app);
      server.app.use(express.json());
      server.app.use(express.urlencoded({ extended: true }));
      server.app.post('/logging', loggingEndpoint);
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // server mode displays report
    }),
  ],
  devtool: 'cheap-module-source-map',
});

Answer 1

我不得不更新其他 webpack 包，然后就成功了；）

旧：

    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^4.4.0",
    "webpack-merge": "^5.7.3"

新：

    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0",
    "webpack-merge": "^5.8.0"

所以只需更新所有内容就可以了。