主页 / user-238738

Alexander Kiselev's questions

Martin Hope
Alexander Kiselev
Asked: 2020-04-20 16:31:22 +0000 UTC
  • 0

一般来说，我尝试设置 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"
    })
  ]
};

吞咽文件.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']);
reactjs