运行GULP服务或构建时，WebPack配置与加载程序发行

Question

AM新手使用WebPack和使用Funtain Web应用程序来踩我的设置，然后添加我自己的东西。我正在遇到问题，我不确定该怎么办。我已经搜索和尝试过，但不确定问题是否是由装载机引起的。

当我运行Gulp服务或建造时，我会得到：

C:vaporsourcemgmtPortaldashboard>gulp serve
[14:23:43] Loading C:vaporsourcemgmtPortaldashboardgulp_tasksbrowsersync.js
[14:23:43] Loading C:vaporsourcemgmtPortaldashboardgulp_taskskarma.js
[14:23:44] Loading C:vaporsourcemgmtPortaldashboardgulp_tasksmisc.js
[14:23:44] Loading C:vaporsourcemgmtPortaldashboardgulp_taskswebpack.js
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
[14:23:45] Using gulpfile C:vaporsourcemgmtPortaldashboardgulpfile.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:vaporsourcemgmtPortaldashboardnode_moduleswebpacklibwebpack.js:19:9)
    at webpackWrapper (C:vaporsourcemgmtPortaldashboardgulp_taskswebpack.js:24:26)
    at gulp.task.done (C:vaporsourcemgmtPortaldashboardgulp_taskswebpack.js:15:3)
    at taskWrapper (C:vaporsourcemgmtPortaldashboardnode_modulesundertakerlibset-task.js:13:15)
    at taskWrapper (C:vaporsourcemgmtPortaldashboardnode_modulesundertakerlibset-task.js:13:15)
    at taskWrapper (C:vaporsourcemgmtPortaldashboardnode_modulesundertakerlibset-task.js:13:15)
    at bound (domain.js:280:14)
    at runBound (domain.js:293:12)
    at asyncRunner (C:vaporsourcemgmtPortaldashboardnode_modulesasync-doneindex.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。如果是故意的，则可以在此处查看迁移指南，如何正确构建配置文件。如果您打算与WebPack 2在一起，则可能需要更改。

如果它是无意的，则可以通过运行NPM命令来重新安装WebPack，但不建议并且不再支持。

npm install --save webpack@1.15.0