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

#node.js #webpack

#node.js #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.log('Webpack refresh...');
});

let port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`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 функцию, у меня возникает ошибка при одновременном запуске двух экземпляров 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


Комментарии:

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

2. @tyskr Я отредактировал сообщение :)

Ответ №1:

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

: 'vue/dist/vue.esm.js'
}
}
}

Комментарии:

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

2. @tyskr Я отредактировал сообщение 🙂

Ответ №1:

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