css - Webpack 配置仅用于 css 和图像

Question

我正在构建一个具有特定 Webpack 配置的 CSS 库，仅用于捆绑 CSS 和图像。

这是我当前的配置:

  const CssEntryPlugin = require("css-entry-webpack-plugin");
  const ExtractTextPlugin = require('extract-text-webpack-plugin');

  module.exports = {
      entry: {
          "styles": "./assets/css/lib.scss"
      },
      output: {
          path: __dirname + "/static/",
          filename: "lib.css"
      },
      module: {
          rules: [
              {
                  test: /\.scss$/,
                  use: ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      //resolve-url-loader may be chained before sass-loader if necessary
                      use: ['css-loader', 'postcss-loader', 'sass-loader'],
                  })
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              loader: 'image-webpack-loader',
                              options: {
                                  bypassOnDebug: true,
                              },
                          }
                      }
                  ]
              }
          ]
      },
      plugins: [
          new ExtractTextPlugin('lib.css'),
      ]
  };

问题是当我运行它时，图像没有被处理，因为它们没有导入到 .css 入口点文件中。如何确保所有图像都已处理？我应该编写一个 .js 文件以同时包含 CSS 和图像作为入口点，还是有解决方法？

Answer 1

您可以将一些 require() 语句添加到您的入口点 .scss 中，或者创建一个单独的文件，就像您建议的那样。我已经成功完成了后者。

另一种选择是像这样提供一个数组作为入口点:

entry: {
  "styles": ["./assets/css/lib.scss", "./assets/img/whatever.png"]
},