如何使用 webpack 缩小单个 css 文件？

Question

虽然 webpack 似乎支持各种各样的详细配置选项，但我只想完成一个简单的任务，即获取位于project/frontend/static/css/style.css的单个 css 源文件并输出该 css 文件的缩小版本到project/frontend/static/css/style.min.css 。 我似乎在 webpack 的文档中找不到任何讨论这个的内容，因为我没有从 JS 导入我的 CSS，只是以老式的方式将它链接到 HTML head ，所以我想要输出的只是一个普通的 CSS 文件，只是缩小了。

Answer 1

使用 webpack，你可能喜欢使用mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

这个插件将 CSS 提取到单独的文件中。 它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。 它支持按需加载 CSS 和 SourceMaps。

它建立在新的 webpack v4 功能（模块类型）之上，并且需要 webpack 4 才能工作。

请查看文档以获取更多信息https://webpack.js.org/plugins/mini-css-extract-plugin/