docs(README): add information about minimization #35

mike-marcacci · 2018-03-12T19:16:34Z

`Issues`

Fixes Out is not run through optimization.minimizer #24

Add a note and example about minimizing CSS output in Webpack 4

jsf-clabot · 2018-03-12T19:16:35Z

All committers have signed the CLA.

codecov · 2018-03-12T19:20:16Z

Codecov Report

Merging #35 into master will not change coverage.
The diff coverage is n/a.

@@         Coverage Diff          @@
##           master   #35   +/-   ##
====================================
  Coverage       0%    0%           
====================================
  Files           3     3           
  Lines         157   157           
  Branches       32    32           
====================================
  Misses        125   125           
  Partials       32    32

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9b1bd63...3ee2d38. Read the comment docs.

mybrainishuge · 2018-03-13T16:39:31Z

README.md

@@ -66,6 +66,36 @@ module.exports = {
 }
 ```

+### Minimizing For Production
+
+While Webpack 5 is likely to come with a CSS minimizer built-in, with Webpack 4 you need to bring your own. To minify your the output, use a plugin like optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):


I think you have a typo :)
"To minify ~~your~~ the output"

Also, I think you're missing an opening square bracket for the plugin link:
[optimize-css-assets-webpack-plugin]
@mike-marcacci

michael-ciniawsky · 2018-03-13T16:43:14Z

README.md

+### Minimizing For Production
+
+While Webpack 5 is likely to come with a CSS minimizer built-in, with Webpack 4 you need to bring your own. To minify your the output, use a plugin like optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):
+


Please add the filename here **webpack.config.js**

mike-marcacci · 2018-03-13T17:34:30Z

Woof, my apologies for the sloppiness! Fixed :)

michael-ciniawsky · 2018-03-13T17:43:28Z

README.md

@@ -68,7 +68,9 @@ module.exports = {

 ### Minimizing For Production

-While Webpack 5 is likely to come with a CSS minimizer built-in, with Webpack 4 you need to bring your own. To minify your the output, use a plugin like optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):
+While Webpack 5 is likely to come with a CSS minimizer built-in, with Webpack 4 you need to bring your own. To minify your the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):


Webpack => webpack :)

mike-marcacci · 2018-03-13T19:40:01Z

Haha, I hope you squash changes while merging! 🤪

mybrainishuge · 2018-03-13T19:42:03Z

README.md

@@ -66,6 +66,38 @@ module.exports = {
 }
 ```

+### Minimizing For Production
+
+While webpack 5 is likely to come with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify your the output, use a plugin like [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):


@mike-marcacci Hey, it's me again. Sorry to be picky, but I think you still have a typo:
"To minify ~~your~~ the output"
I think you want either "your" or "the", but not both.

mybrainishuge · 2018-03-13T19:44:09Z

:)

piecyk · 2018-03-13T19:51:18Z

README.md

+      filename: "[name].css",
+      chunkFilename: "[id].css"
+    }),
+    new OptimizeCssAssetsPlugin()


hmm this shouldn't by at

optimization: { minimizer: [ new OptimizeCssAssetsPlugin(), ] }

Maybe! I couldn't find docs for this syntax when I created this issue, and I have things working as written. Is it that simple? Just add it to optimization.minimizer? Does doing this remove the built-in one for JS?

Yeah it will replace minimizer options, defaults are at https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsDefaulter.js#L265-L281
and apply at https://github.com/webpack/webpack/blob/master/lib/WebpackOptionsApply.js#L334-L338

basic the reason to use optimization.minimizer is to don't run optimisation on development mode.

Ah, interesting. Is this the preferred way then?

yep, also make sure to add the UglifyJsPlugin too as the default is overriden.

@mike-marcacci friendly ping

alexander-akait · 2018-03-16T13:29:56Z

//cc @michael-ciniawsky

mike-marcacci · 2018-03-22T19:04:44Z

Sorry for the delay – we were in Indian Creek this week and had no cell service. I've tested this syntax, and it works. Let me know if there's any other changes you'd make!

alexander-akait · 2018-03-26T18:20:24Z

@mike-marcacci can you rebase PR?

mike-marcacci · 2018-03-27T21:26:22Z

@evilebottnawi - good to go!

robrichard · 2018-03-28T17:57:36Z

@mike-marcacci is this the same as adding minimize: true to css-loader?

mike-marcacci · 2018-03-31T21:52:38Z

Hey @robrichard, I'm not 100% sure actually! It seems there are many ways to add minimization, but based on the above conversation the way described in this PR is considered most idiomatic for webpack 4+ (although it is certainly less ergonomic than some of the others).

I personally have no preference, so I'll defer to the opinion of those more intimately involved with the internals of webpack.

mike-marcacci mentioned this pull request Mar 12, 2018

Out is not run through optimization.minimizer #24

Closed

mybrainishuge reviewed Mar 13, 2018

View reviewed changes

michael-ciniawsky requested changes Mar 13, 2018

View reviewed changes

michael-ciniawsky approved these changes Mar 13, 2018

View reviewed changes

mybrainishuge reviewed Mar 13, 2018

View reviewed changes

piecyk reviewed Mar 13, 2018

View reviewed changes

michael-ciniawsky changed the title ~~Fix #24 - Add information about minimization~~ docs(README): add information about minimization Mar 20, 2018

michael-ciniawsky added type: docs semver: patch pr: review status: pending labels Mar 20, 2018

michael-ciniawsky added this to the 0.2.1 milestone Mar 20, 2018

Fix webpack-contrib#24 - Add information about minimization

3ee2d38

mike-marcacci force-pushed the patch-1 branch from fd77038 to 3ee2d38 Compare March 27, 2018 21:25

alexander-akait added status: approved and removed pr: review labels Mar 28, 2018

alexander-akait merged commit ff72885 into webpack-contrib:master Mar 28, 2018

michael-ciniawsky removed this from the 0.4.3 milestone Aug 21, 2018

		### Minimizing For Production

		While Webpack 5 is likely to come with a CSS minimizer built-in, with Webpack 4 you need to bring your own. To minify your the output, use a plugin like optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin):

Uh oh!

docs(README): add information about minimization #35

docs(README): add information about minimization #35

Uh oh!

Conversation

mike-marcacci commented Mar 12, 2018 • edited by michael-ciniawsky Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issues

Uh oh!

jsf-clabot commented Mar 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Mar 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mike-marcacci commented Mar 13, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mike-marcacci commented Mar 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mybrainishuge commented Mar 13, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alexander-akait commented Mar 16, 2018

Uh oh!

mike-marcacci commented Mar 22, 2018

Uh oh!

alexander-akait commented Mar 26, 2018

Uh oh!

mike-marcacci commented Mar 27, 2018

Uh oh!

robrichard commented Mar 28, 2018

Uh oh!

mike-marcacci commented Mar 31, 2018

Uh oh!

Uh oh!

mike-marcacci commented Mar 12, 2018 •

edited by michael-ciniawsky

Loading

`Issues`

jsf-clabot commented Mar 12, 2018 •

edited

Loading

codecov bot commented Mar 12, 2018 •

edited

Loading

mike-marcacci commented Mar 13, 2018 •

edited

Loading