Нужна помощь в настройке Webpack 4 + Browsersync.
Я получаю следующее сообщение об ошибке при попытке webpack --watch, но не могу понять, является ли это проблемой с моей конфигурацией или плагин browsersync-webpack-не обновлен для поддержки v4.
ConcurrentCompilationError: You ran Webpack twice. Each instance only supports a single concurrent compilation at a time.
at Compiler.watch (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:142:36)
at Object.startWatch (/wp-content/themes/theme-name/node_modules/webpack-dev-middleware/lib/Shared.js:176:29)
at Shared (/wp-content/themes/theme-name/node_modules/webpack-dev-middleware/lib/Shared.js:238:8)
at module.exports (/wp-content/themes/theme-name/node_modules/webpack-dev-middleware/middleware.js:22:15)
at BrowserSyncWebpackPlugin.setupWebpackDevMiddleware (/wp-content/themes/theme-name/node_modules/browsersync-webpack-plugin/index.js:162:34)
at BrowserSyncWebpackPlugin.setup (/wp-content/themes/theme-name/node_modules/browsersync-webpack-plugin/index.js:151:12)
at BrowserSyncWebpackPlugin.start (/wp-content/themes/theme-name/node_modules/browsersync-webpack-plugin/index.js:130:11)
at Object.onceWrapper (events.js:317:30)
at emitTwo (events.js:126:13)
at BrowserSyncWebpackPlugin.emit (events.js:214:7)
at AsyncSeriesHook.eval (eval at create (/wp-content/themes/theme-name/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:18:1)
at AsyncSeriesHook.lazyCompileHook (/wp-content/themes/theme-name/node_modules/tapable/lib/Hook.js:35:21)
at Watching._done (/wp-content/themes/theme-name/node_modules/webpack/lib/Watching.js:99:28)
at compiler.emitRecords.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Watching.js:73:19)
at Compiler.emitRecords (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:315:39)
at compiler.emitAssets.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Watching.js:54:20)
at hooks.afterEmit.callAsync.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:301:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/wp-content/themes/theme-name/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/wp-content/themes/theme-name/node_modules/tapable/lib/Hook.js:35:21)
at asyncLib.forEach.err (/wp-content/themes/theme-name/node_modules/webpack/lib/Compiler.js:298:27)
at done (/wp-content/themes/theme-name/node_modules/neo-async/async.js:2854:11)
at /wp-content/themes/theme-name/node_modules/neo-async/async.js:2805:7
at /wp-content/themes/theme-name/node_modules/graceful-fs/graceful-fs.js:43:10
at FSReqWrap.oncomplete (fs.js:135:15)
webpack.config.js
const path = require('path');
const config = require('./config');
const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browsersync-webpack-plugin');
const target = process.env.DEVURL || config.devUrl;
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
/**
* Modules
*/
const loadModules = {
rules: [
{
enforce: 'pre',
test: /\.js?$/,
include: config.paths.assets,
use: 'eslint',
},
{
enforce: 'pre',
test: /\.(js|s?[ca]ss)$/,
include: config.paths.assets,
loader: 'import-glob',
},
{
test: /\.js$/,
exclude: [/(node_modules|lib|vendor)/],
include: config.paths.assets,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
include: config.paths.assets,
use: [
'cache',
config.env.production ? MiniCssExtractPlugin.loader: 'style-loader',
{ loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'postcss', options: {
config: { path: __dirname, ctx: config },
sourceMap: config.enabled.sourceMaps,
},
},
],
},
{
test: /\.scss$/,
include: config.paths.assets,
use: [
config.env.production ? MiniCssExtractPlugin.loader: 'style-loader',
{ loader: 'css', options: { sourceMap: config.enabled.sourceMaps } },
{
loader: 'postcss', options: {
config: { path: __dirname, ctx: config },
sourceMap: config.enabled.sourceMaps,
},
},
{ loader: 'resolve-url', options: { sourceMap: config.enabled.sourceMaps } },
'sass',
'import-glob',
],
},
{
test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
use: [
{
loader: 'file',
options: {
name: `[path]${assetsFilenames}.[ext]`,
publicPath: '../',
},
}
],
}],
}
/**
* Plugins
**/
const loadPlugins = [
new CleanWebpackPlugin([config.paths.dist], {
root: config.paths.root,
verbose: false,
}),
new MiniCssExtractPlugin({
filename: `styles/${assetsFilenames}.css`,
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify( config.mode )
}
}),
new FriendlyErrorsWebpackPlugin(),
];
/**
* Final config
*/
let webpackConfig = {
context: config.paths.assets,
entry: config.entry,
mode: config.mode,
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
output: {
path: config.paths.dist,
publicPath: config.publicPath,
filename: `scripts/${assetsFilenames}.js`,
},
stats: false,
module: loadModules,
resolve: {
modules: [
config.paths.assets,
'node_modules',
],
enforceExtension: false,
},
resolveLoader: {
moduleExtensions: ['-loader'],
},
plugins: loadPlugins,
}
/**
* Watch
*/
if (config.enabled.watcher) {
webpackConfig.stats = false;
webpackConfig.devtool = '#cheap-module-source-map';
webpackConfig.plugins.push(
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new BrowserSyncPlugin({
target,
open: config.open,
proxyUrl: config.proxyUrl,
watch: config.watch,
delay: 500,
}),
);
}
/**
* Export final config
*/
module.exports = webpackConfig;
package.json
{
"dependencies": {
"autoprefixer": "^8.4.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.24.4",
"browser-sync-webpack-plugin": "^2.2.2",
"browsersync-webpack-plugin": "^0.6.0",
"cache-loader": "^1.2.2",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"cssnano": "^3.10.0",
"eslint": "^4.19.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.11.0",
"file-loader": "^1.1.11",
"friendly-errors-webpack-plugin": "^1.7.0",
"imagemin-mozjpeg": "^7.0.0",
"imagemin-webpack-plugin": "^2.1.1",
"import-glob": "^1.5.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.4",
"postcss-safe-parser": "^3.0.1",
"resolve-url-loader": "^2.3.0",
"rimraf": "^2.6.2",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"url-loader": "^1.0.1",
"webpack": "^4.7.0",
"webpack-assets-manifest": "^3.0.1",
"webpack-cli": "^2.1.3",
"webpack-hot-middleware": "^2.22.1",
"webpack-merge": "^4.1.2",
"yargs": "^11.0.0"
},
"devDependencies": {
"breakpoint-sass": "^2.7.1",
"normalize.css": "^8.0.0",
"parsleyjs": "^2.8.1",
"susy": "^3.0.5"
}
}