Блог

Я обновил сервер разработки 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 в конфигурациях возможности изменять порядок параметров и компилятора, и я не использую a 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',
});
 

Мне пришлось обновить другие пакеты 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"
 

Так что просто обновите все, и это сделало свое дело.