运行gulp服务或编译时，装载器的Webpack配置问题

Question

刚刚使用webpack并使用Fountain Web App将我的设置脚手架，然后添加我自己的东西。我遇到了问题，我不知道还有什么要处理。我已经搜索并尝试过，但不知道问题是由装载机还是什么造成的。

当我运行一饮而尽服务或者构建，我得到这个：

C:\vapor\source\mgmtPortal\dashboard>gulp serve 
[14:23:43] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\browsersync.js 
[14:23:43] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\karma.js 
[14:23:44] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\misc.js 
[14:23:44] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js 
fallbackLoader option has been deprecated - replace with "fallback" 
loader option has been deprecated - replace with "use" 
[14:23:45] Using gulpfile C:\vapor\source\mgmtPortal\dashboard\gulpfile.js 
[14:23:45] Starting 'serve'... 
[14:23:45] Starting 'webpack:watch'... 
[14:23:45] 'webpack:watch' errored after 121 ms 
[14:23:45] 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 (C:\vapor\source\mgmtPortal\dashboard\node_modules\webpack\lib\webpack.js:19:9) 
    at webpackWrapper (C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js:24:26) 
    at gulp.task.done (C:\vapor\source\mgmtPortal\dashboard\gulp_tasks\webpack.js:15:3) 
    at taskWrapper (C:\vapor\source\mgmtPortal\dashboard\node_modules\undertaker\lib\set-task.js:13:15) 
    at taskWrapper (C:\vapor\source\mgmtPortal\dashboard\node_modules\undertaker\lib\set-task.js:13:15) 
    at taskWrapper (C:\vapor\source\mgmtPortal\dashboard\node_modules\undertaker\lib\set-task.js:13:15) 
    at bound (domain.js:280:14) 
    at runBound (domain.js:293:12) 
    at asyncRunner (C:\vapor\source\mgmtPortal\dashboard\node_modules\async-done\index.js:36:18) 
    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) 
    at run (bootstrap_node.js:390:7) 
    at startup (bootstrap_node.js:150:9) 
    at bootstrap_node.js:505:3 
[14:23:45] 'serve' errored after 127 ms 

我的WebPack的配置是这样的：

const webpack = require('webpack'); 
const conf = require('./gulp.conf'); 
const path = require('path'); 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

// const rules = { 
//  // ... 
//  componentStyles: { 
//   test: /\.scss$/, 
//   loaders: ["style-loader", "css-loader", "sass-loader"], 
//   exclude: path.resolve(__dirname, 'src/app') 
//  }, 
//  fonts: { 
//   test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, 
//   loader: 'file-loader?name=fonts/[name].[ext]' 
//  }, 
//  // ... 
// } 

// const config = module.exports = {}; 

// config.module = { 
//  rules: [ 
//   // ... 
//   rules.componentStyles, 
//   rules.fonts, 
//   // ... 
//  ] 
// }; 

module.exports = { 
    module: { 
     // preLoaders: [{ 
     //  test: /\.js$/, 
     //  exclude: /node_modules/, 
     //  loader: 'eslint' 
     // }], 

     loaders: [{ 
       test: /.json$/, 
       loaders: [ 
        'json' 
       ] 
      }, 
      { 
       test: /\.(css|scss)$/, 
       loaders: [ 
        'style', 
        'css', 
        'sass', 
        'postcss' 
       ] 
      }, 
      { 
       test: /.html$/, 
       loaders: [ 
        'html' 
       ] 
      } 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery", 
      "window.jQuery": "jquery", 
      "Tether": "tether" 
     }), 
     new HtmlWebpackPlugin({ 
      template: conf.path.src('index.html') 
     }), 
     new webpack.ProvidePlugin({ // inject ES5 modules as global vars 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery', 
      Tether: 'tether' 
     }), 
     new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
      conf.paths.src 
     ) 
    ], 
    postcss:() => [autoprefixer], 
    debug: true, 
    devtool: 'source-map', 
    output: { 
     path: path.join(process.cwd(), conf.paths.tmp), 
     filename: 'index.js' 
    }, 
    entry: `./${conf.path.src('index')}` 
}; 

任何你能伸出手帮助我在这？

谢谢了。

Answer 1

要解决此特定错误，您需要从您的webpack配置中删除debug: true,。该错误是说，debug参数无效的WebPack 2，这是只有在的WebPack 1

错误的行有效的是在这里：

[14:23:45] 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. 

这听起来像你升级到的WebPack 2，也许是无意的。如果是有意的，您可以查看the migration guide here，了解如何正确构建您的配置文件。如果您计划继续使用Webpack 2，则可能需要更多更改。

如果这是无意的，可以通过运行npm命令重新安装webpack，但不建议不再支持它。

npm install --save webpack@1.15.0