Javascript 运行gulp Service或build时加载程序出现网页包配置问题

Javascript 运行gulp Service或build时加载程序出现网页包配置问题,javascript,configuration,webpack,gulp,webpack-2,Javascript,Configuration,Webpack,Gulp,Webpack 2,我刚开始使用webpack,使用Fountain Web App搭建我的设置,然后添加我自己的东西。我遇到了一些问题,我不知道还能做些什么。我已经搜索并尝试过了,但不确定问题是由装载机引起的还是什么引起的 当我运行gulp serve或build时,我得到以下信息: C:\vapor\source\mgmtPortal\dashboard>gulp serve [14:23:43] Loading C:\vapor\source\mgmtPortal\dashboard\gulp_task

我刚开始使用webpack,使用Fountain Web App搭建我的设置,然后添加我自己的东西。我遇到了一些问题,我不知道还能做些什么。我已经搜索并尝试过了,但不确定问题是由装载机引起的还是什么引起的

当我运行gulp serve或build时,我得到以下信息:

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
我的网页包配置如下所示:

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')}`
};
你们谁能帮我一把吗


非常感谢。

要解决此特定错误,您需要从您的网页配置中删除
debug:true,
。错误是说
debug
参数对网页2无效,仅在网页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.
听起来你升级到了Webpack2,可能是无意的。如果是故意的,您可以查看如何正确构造配置文件。如果你打算继续使用Webpack2,它可能需要更多的改变

如果这是无意的,您可以通过运行npm命令重新安装webpack,但不推荐也不再支持该命令

npm install --save webpack@1.15.0

谢谢你,亚当!是的-我确实加载了Webpack2,但没想到它会这样做。需要重新考虑迁移到2的过程……迁移过程并不太糟糕,只要确保阅读错误消息并尝试遵循迁移指南即可。这是一个有点棘手的跳入事先没有网页知识,但我相信你会做得很好!