Webpack

Question

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

我只想做这个：

我有一个 app.css 和一个 main.css，我想将它们缩小并打包成一个（比如 app.min.css）并复制到我的输出目录 - 什么最简单的方法？

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

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

感谢您的帮助

Answer 1

这个其实很简单，the docs do a good job解释一下。

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

入口块可以包含多个文件，所以你可以这样修改它。或者你可以 require/import 它们在 index.js 的顶部。

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

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