我继承了一个使用 webpack 的 Web 应用。在我的应用中，我有一个名为“pub”的目录，如下所示：

./pub
    /styles
      app.css
    /images
      brand.png

我整个上午都在尝试通过 webpack 使用这些目录，但没有成功。在我的 webpack.config.js 文件中，我有以下内容：

const path = require('path');

const projectRoot = path.resolve(__dirname, '../');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }      
    ]
  }
};

然后，在我的 index.js 文件中，我有以下内容：

import logoImage from './public/images/brand.png';
require("css!./public/css/app.css");

当我运行 webpack 时，我收到一条错误消息：

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'css-loader' instead of 'css',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

我不太明白这个错误。当我查看它，然后查看我的 webpack.config.js 文件时，我发现我正在使用 css-loader 。除此之外，一旦 require 语句正常工作，我如何在网页中使用样式。我只是想在 Web 应用程序中使用 Webpack，并想导入我的品牌和 CSS，但我搞不懂。