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

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

另一个选择是提供一个数组作为你的入口点：

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

Webpack配置仅适用于CSS和图像

1 个答案: