В общем пытаюсь настроить окружение Gulp + Webpack + React и нарвался на такую ошибку при запуске таска:
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration has an unknown property 'debug'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
The 'debug' property was removed in webpack 2.
Loaders should be updated to allow passing this option via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to switch loaders into debug mode:
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
})
]
at webpack (/home/alexander/projects/webpack/node_modules/webpack/lib/webpack.js:19:9)
at Gulp.<anonymous> (/home/alexander/projects/webpack/gulpfile.js:30:26)
at module.exports (/home/alexander/projects/webpack/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/home/alexander/projects/webpack/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/home/alexander/projects/webpack/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/home/alexander/projects/webpack/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Module.runMain (module.js:606:11)
Не пойму где проблема. Просто запуская конфиг webpack ошибок не выдает. Ниже конфиги: webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
cache: true,
entry: [
'./frontend/js/index.js'
],
output: {
path: path.join(__dirname, "dist"),
publicPath: "dist/",
filename: "[name].js",
chunkFilename: "[chunkhash].js"
},
module: {
loaders: [
// required to write "require('./style.css')"
{ test: /\.css$/, loader: "style-loader!css-loader" },
// required for bootstrap icons
{ test: /\.woff$/, loader: "url-loader?prefix=font/&limit=5000&mimetype=application/font-woff" },
{ test: /\.ttf$/, loader: "file-loader?prefix=font/" },
{ test: /\.eot$/, loader: "file-loader?prefix=font/" },
{ test: /\.svg$/, loader: "file-loader?prefix=font/" },
// required for react jsx
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: /node_modules/,
}
]
},
resolve: {
alias: {
// Bind version of jquery
jquery: "jquery-2.0.3",
// Bind version of jquery-ui
"jquery-ui": "jquery-ui-1.10.3",
// jquery-ui doesn't contain a index file
// bind module to the complete module
"jquery-ui-1.10.3$": "jquery-ui-1.10.3/ui/jquery-ui.js",
}
},
plugins: [
new webpack.LoaderOptionsPlugin({
debug: true
}),
new webpack.ProvidePlugin({
// Automtically detect jQuery and $ as free var in modules
// and inject the jquery library
// This is required by many jquery plugins
jQuery: "jquery",
$: "jquery"
})
]
};
gulpfile.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");
var stream = require('webpack-stream');
gulp.task('webpack', [], function() {
return gulp.src(path.ALL)
.pipe(sourcemaps.init())
.pipe(stream(webpackConfig))
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.DEST_BUILD));
});
gulp.task("webpack-dev-server", function(callback) {
// modify some webpack config options
var myConfig = Object.create(webpackConfig);
myConfig.devtool = "eval";
myConfig.debug = true;
// Start a webpack-dev-server
new WebpackDevServer(webpack(myConfig), {
publicPath: "/" + myConfig.output.publicPath,
stats: {
colors: true
}
}).listen(8080, "localhost", function(err) {
if (err) throw new gutil.PluginError("webpack-dev-server", err);
gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
});
});
var path = {
HTML: 'src/index.html',
ALL: ['src/**/*.jsx', 'src/**/*.js'],
MINIFIED_OUT: 'build.min.js',
DEST_SRC: 'dist/src',
DEST_BUILD: 'dist/build',
DEST: 'dist'
};
gulp.task('watch', function() {
gulp.watch(path.ALL, ['webpack']);
});
gulp.task('default', ['webpack-dev-server', 'watch']);
The 'debug' property was removed in webpack 2.