css - Webpack - 如何进行简单的 css 缩小和连接

Webpack 确实很强大，但对于初学者(就像我一样)来说，它会让人感到困惑和复杂。最近他们转移到 2.2 也无济于事，所以我看到的很多文档都是针对旧版本的，这增加了这个难度。

我想做的就是:

我有一个 app.css 和一个 main.css，我想将它们压缩并捆绑成一个(例如 app.min.css)并复制到我的输出目录 - 最简单的方法是什么？

我在我的 html 文件中手动链接它，所以我不需要 webpack 为我或任何东西写出 URL。后面我可能会围绕模块化做更多花哨的事情，但现在我想启动并运行我的基本设置。我确实在我的入口 index.js 文件上运行了我的 webpack.config.js，一切看起来都很好。

最简单的方法是什么？我错过了什么？我迷失在这个加载器和那个加载器(css-loader、raw-loader、style-loader...)和神秘的错误中，需要时间来弄清楚。令我惊讶的是，对于一个如此强大的工具，你会想象有更简单的方法来做这样的基本事情......

谢谢你的帮助

最佳答案

这个其实很简单，而且the docs do a good job解释它。

首先，您需要确保配置了一个 css 加载器，以便 Webpack 知道如何处理 css 文件。然后通过使用 ExtractTextPlugin，您基本上可以将您指定的内容捆绑到一个单独的文件中。

入口 block 可以包含多个文件，因此您可以像这样修改它。或者您可以在 index.js 的顶部要求/导入它们。

entry: {
  bundle: "./index.js",
  main: "./main.css",
  app: "./app.css"
}

关于css - Webpack - 如何进行简单的 css 缩小和连接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41923725/