Режим просмотра в API узла webpack

Я хочу создать простой шаблон vue + nodejs и вручную включить просмотр веб-пакетов из API.
Пожалуйста, посмотрите на этот код:

const webpack = require('webpack');
const webpackConfig = require('./webpack-dev.config.js');
const server = require('./server');

let compiler = webpack(webpackConfig);
compiler.watch({}, (err, stats) => {
  if (err || stats.hasErrors()) console.error(err);
  console.info('Webpack refresh...');
});

let port = process.env.PORT || 3000;
server.listen(port, () => {
  console.info(`Development server is running on localhost:${port}`);
});

И из этого фрагмента у меня есть предупреждение webpack об устаревании (обратный вызов должен быть внутри функции webpack()).

(node:4647) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
(Use `node --trace-deprecation ...` to show where the warning was created)
Development server is running on localhost:3000
(node:4647) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
Webpack refresh...

Когда я упаковываю обратный вызов в функцию webpack, у меня возникает ошибка одновременного запуска двух экземпляров веб-пакета:

Development server is running on localhost:3000
(node:4671) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
    at Compiler.watch (/Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Compiler.js:357:19)
    at Watching.handler (/Users/artur/Documents/Dev/_playground.nosync/todoapp/watcher.js:6:12)
    at /Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Watching.js:185:9
    at Hook.eval [as callAsync] (eval at create (/Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/tapable/lib/Hook.js:18:14)
    at Watching._done (/Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Watching.js:182:28)
    at /Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Watching.js:107:21
    at Compiler.emitRecords (/Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Compiler.js:775:39)
    at /Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Watching.js:85:22
    at /Users/artur/Documents/Dev/_playground.nosync/todoapp/node_modules/webpack/lib/Compiler.js:757:14
Webpack refresh...

На мой взгляд, функция webpack запускает сам веб-пакет, а затем compiler.watch хочет запустить его еще раз.

Буду рад помощи как избавиться от этих предупреждений/ошибок.

редактировать: моя конфигурация веб-пакета:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  stats: {
    warnings: false
  },
  watch: true,
  entry: './src/client.js',
  output: {
    filename: 'main.js',
    path: path.join(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.s[ac]ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      cache: false
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

не могли бы вы поделиться своим webpack-dev.config, пожалуйста?

trk 13.12.2020 18:44

@tyskr Я отредактировал пост :)

artolini 13.12.2020 19:22
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
2
1 531
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что удаление watch: true из webpack-dev.config решит вашу проблему. Ref: https://github.com/webpack/webpack-cli/issues/2089#issuecomment-724749514

Другие вопросы по теме