时间戳

首页 > 解决方案 > 如何使用 webpack 缩小单个 css 文件？

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

问题描述

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

标签： csswebpack

解决方案

使用 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/

推荐阅读