webpack加入配置文件时出错

1.配置文件内容出错

填写好配置文件：

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

运行webpack时
出错日志：

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   -> Options affecting the normal modules (`NormalModuleFactory`).

错误代码：

解决办法：

查阅官方文档后得知，webpack4.0以上版本不支持loader，于是将web.config.js文件修改为如下：

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        rules: [//将loaders修改为了rules
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

2.重新运行webpack后又报错

报错关键词：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

报错截图：

分析错误原因：
没有设置webpack的模式，是生产还是开发（production or development）

解决办法：

执行命令：webpack --mode=production 或者 webpack --mode=development

成功截图：

问题解决！！