運行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