Я хочу создать простой шаблон 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'
}
}
}
@tyskr Я отредактировал пост :)
Я думаю, что удаление watch: true
из webpack-dev.config решит вашу проблему.
Ref
: https://github.com/webpack/webpack-cli/issues/2089#issuecomment-724749514
не могли бы вы поделиться своим webpack-dev.config, пожалуйста?