CODEWITHSUNDEEP
csswebpack
user5643983
user5643983

Reputation:

How to minify a single css file with webpack?

While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.

Upvotes: 3

Views: 1472

Answers (1)

Ibraheem Zafar
Ibraheem Zafar

Reputation: 346

With webpack you may like to use mini-css-extract-plugin

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

This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.

It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.

Please look at the documentation for more info https://webpack.js.org/plugins/mini-css-extract-plugin/

Upvotes: 2

Related Questions