refactor: the minimize option (#216)

BREAKING CHANGE: the `minimize` option is `true` by default in `production` mode. You need to list all options for `html-minifier` if you use `object` notation.

Author: evilebottnawi

README.md

@@ -55,13 +55,13 @@ You may need to specify loaders for images in your configuration (recommended `f
 
 ## Options
 
-|               Name                |        Type         |    Default    | Description                              |
-| :-------------------------------: | :-----------------: | :-----------: | :--------------------------------------- |
-|       **[`attrs`](#attrs)**       |  `{Array\|String}`  | `['img:src']` | Enables/Disables attributes handling     |
-|        **[`root`](#root)**        |     `{String}`      |  `undefiend`  | Allow to handle root-relative attributes |
-| **[`interpolate`](#interpolate)** | `{Boolean\|String}` |    `false`    | Allow to use expressions in HTML syntax  |
-|    **[`minimize`](#minimize)**    | `{Boolean\|Object}` |    `false`    | Tell `html-loader` to minimize HTML      |
-|    **[`esModule`](#esmodule)**    |     `{Boolean}`     |    `false`    | Use ES modules syntax                    |
+|               Name                |        Type         |                   Default                    | Description                              |
+| :-------------------------------: | :-----------------: | :------------------------------------------: | :--------------------------------------- |
+|       **[`attrs`](#attrs)**       |  `{Array\|String}`  |                `['img:src']`                 | Enables/Disables attributes handling     |
+|        **[`root`](#root)**        |     `{String}`      |                 `undefiend`                  | Allow to handle root-relative attributes |
+| **[`interpolate`](#interpolate)** | `{Boolean\|String}` |                   `false`                    | Allow to use expressions in HTML syntax  |
+|    **[`minimize`](#minimize)**    | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML      |
+|    **[`esModule`](#esmodule)**    |     `{Boolean}`     |                   `false`                    | Use ES modules syntax                    |
 
 ### `attrs`
 
@@ -197,12 +197,25 @@ This may be useful for template syntaxes. For example:
 ### `minimize`
 
 Type: `Boolean|Object`
-Default: `false`
+Default: `true` in production mode, otherwise `false`
 
 Tell `html-loader` to minimize HTML.
 
 #### `Boolean`
 
+The enabled rules for minimizing by default are the following ones:
+
+- collapseWhitespace
+- conservativeCollapse
+- keepClosingSlash
+- minifyCSS
+- minifyJS
+- removeAttributeQuotes
+- removeComments
+- removeScriptTypeAttributes
+- removeStyleTypeAttributes
+- useShortDoctype
+
 **webpack.config.js**
 
 ```js
@@ -408,5 +421,3 @@ Please take a moment to read our contributing guidelines if you haven't yet done
 [chat-url]: https://gitter.im/webpack/webpack
 [size]: https://packagephobia.now.sh/badge?p=html-loader
 [size-url]: https://packagephobia.now.sh/result?p=html-loader
-
-[]: #interpolate

src/constants.js

@@ -4,18 +4,3 @@ export const GET_URL_CODE =
 export const IDENT_REGEX = /xxxHTMLLINKxxx[0-9.]+xxx/g;
 
 export const REQUIRE_REGEX = /\${require\([^)]*\)}/g;
-
-export const MINIMIZE_SETTINGS = [
-  'removeComments',
-  'removeCommentsFromCDATA',
-  'removeCDATASectionsFromCDATA',
-  'collapseWhitespace',
-  'conservativeCollapse',
-  'removeAttributeQuotes',
-  'useShortDoctype',
-  'keepClosingSlash',
-  'minifyJS',
-  'minifyCSS',
-  'removeScriptTypeAttributes',
-  'removeStyleTypeAttributes',
-];

src/index.js

@@ -6,19 +6,14 @@ import { getOptions, isUrlRequest, urlToRequest } from 'loader-utils';
 
 import validateOptions from 'schema-utils';
 
+import { GET_URL_CODE, IDENT_REGEX, REQUIRE_REGEX } from './constants';
 import {
-  GET_URL_CODE,
-  IDENT_REGEX,
-  MINIMIZE_SETTINGS,
-  REQUIRE_REGEX,
-} from './constants';
-import {
-  convertMapToObject,
   getAttributes,
   getExportsString,
   getLinks,
   getUniqueIdent,
   replaceLinkWithIdent,
+  isProductionMode,
 } from './utils';
 
 import schema from './options.json';
@@ -90,16 +85,29 @@ export default function htmlLoader(source) {
     }
   }
 
-  if (options.minimize) {
-    const minimizeOptions = new Map(Object.entries(options.minimize));
-
-    for (const setting of MINIMIZE_SETTINGS) {
-      if (!minimizeOptions.has(setting)) {
-        minimizeOptions.set(setting, true);
-      }
-    }
-
-    content = minify(content, convertMapToObject(minimizeOptions));
+  const minimize =
+    typeof options.minimize === 'undefined'
+      ? isProductionMode(this)
+      : options.minimize;
+
+  if (minimize) {
+    const minimizeOptions =
+      typeof minimize === 'boolean'
+        ? {
+            collapseWhitespace: true,
+            conservativeCollapse: true,
+            keepClosingSlash: true,
+            minifyCSS: true,
+            minifyJS: true,
+            removeAttributeQuotes: true,
+            removeComments: true,
+            removeScriptTypeAttributes: true,
+            removeStyleLinkTypeAttributes: true,
+            useShortDoctype: true,
+          }
+        : minimize;
+
+    content = minify(content, minimizeOptions);
   }
 
   if (options.interpolate && options.interpolate !== 'require') {
@@ -122,6 +130,7 @@ export default function htmlLoader(source) {
       }
 
       let request = urlToRequest(data.get(match), options.root);
+
       if (options.interpolate === 'require') {
         request = data.get(match);
       }

src/utils.js

@@ -4,17 +4,6 @@ function randomIdent() {
   return `xxxHTMLLINKxxx${Math.random()}${Math.random()}xxx`;
 }
 
-export function convertMapToObject(map) {
-  const obj = {};
-
-  for (const prop of map) {
-    // eslint-disable-next-line prefer-destructuring
-    obj[prop[0]] = prop[1];
-  }
-
-  return obj;
-}
-
 export function getAttributes(options) {
   if (typeof options.attrs !== 'undefined') {
     if (typeof options.attrs === 'string') {
@@ -74,3 +63,7 @@ export function replaceLinkWithIdent(source, link, ident, offset = 0) {
     source.substr(link.start + link.length + offset)
   );
 }
+
+export function isProductionMode(loaderContext) {
+  return loaderContext.mode === 'production' || !loaderContext.mode;
+}

test/loader.test.js

@@ -6,7 +6,7 @@ import { GET_URL_CODE } from '../src/constants';
 describe('loader', () => {
   it('should convert to requires', () => {
     const result = loader.call(
-      {},
+      { mode: 'development' },
       'Text <img src="image.png"><img src="~bootstrap-img"> Text <img src="">'
     );
 
@@ -18,6 +18,7 @@ describe('loader', () => {
   it('should accept attrs from query', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?attrs=script:src',
       },
       'Text <script src="script.js"><img src="image.png">'
@@ -30,6 +31,7 @@ describe('loader', () => {
   it('should accept attrs from query (space separated)', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?attrs=script:src img:src',
       },
       'Text <script src="script.js"><img src="image.png">'
@@ -42,6 +44,7 @@ describe('loader', () => {
   it('should accept attrs from query (multiple)', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?attrs[]=script:src&attrs[]=img:src',
       },
       'Text <script src="script.js"><img src="image.png">'
@@ -54,6 +57,7 @@ describe('loader', () => {
   it('should accept :attribute (empty tag) from query', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?attrs[]=:custom-src',
       },
       'Text <custom-element custom-src="image1.png"><custom-img custom-src="image2.png"/></custom-element>'
@@ -66,6 +70,7 @@ describe('loader', () => {
   it('should accept :attribute (empty tag) from query and not collide with similar attributes', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?attrs[]=:custom-src',
       },
       'Text <custom-element custom-src="image1.png" custom-src-other="other.png"><custom-img custom-src="image2.png"/></custom-element>'
@@ -77,7 +82,7 @@ describe('loader', () => {
   });
   it('should not make bad things with templates', () => {
     const result = loader.call(
-      {},
+      { mode: 'development' },
       '<h3>#{number} {customer}</h3>\n<p>   {title}   </p>'
     );
 
@@ -88,7 +93,7 @@ describe('loader', () => {
 
   it('should preserve escaped quotes', () => {
     const result = loader.call(
-      {},
+      { mode: 'development' },
       '<script>{"json": "with \\"quotes\\" in value"}</script>'
     );
 
@@ -98,7 +103,10 @@ describe('loader', () => {
   });
 
   it('should not translate root-relative urls (without root query)', () => {
-    const result = loader.call({}, 'Text <img src="/image.png">');
+    const result = loader.call(
+      { mode: 'development' },
+      'Text <img src="/image.png">'
+    );
 
     expect(result).toBe(
       `${GET_URL_CODE}module.exports = "Text <img src=\\"/image.png\\">";`
@@ -107,6 +115,7 @@ describe('loader', () => {
   it('should accept root from query', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?root=/test',
       },
       'Text <img src="/image.png">'
@@ -117,32 +126,41 @@ describe('loader', () => {
     );
   });
   it('should ignore hash fragments in URLs', () => {
-    const result = loader.call({}, '<img src="icons.svg#hash">');
+    const result = loader.call(
+      { mode: 'development' },
+      '<img src="icons.svg#hash">'
+    );
 
     expect(result).toBe(
       `${GET_URL_CODE}module.exports = "<img src=\\"" + __url__(require("./icons.svg")) + "#hash\\">";`
     );
   });
   it("should ignore anchor with 'mailto:' in the href attribute", () => {
     const result = loader.call(
-      {},
+      { mode: 'development' },
       '<a href="mailto:username@exampledomain.com"></a>'
     );
 
     expect(result).toBe(
       `${GET_URL_CODE}module.exports = "<a href=\\"mailto:username@exampledomain.com\\"></a>";`
     );
   });
+
   it('should ignore interpolations by default', () => {
-    const result = loader.call({}, '<img src="${"Hello " + (1+1)}">');
+    const result = loader.call(
+      { mode: 'development' },
+      '<img src="${"Hello " + (1+1)}">'
+    );
 
     expect(result).toBe(
       `${GET_URL_CODE}module.exports = "<img src=\\"\${\\"Hello \\" + (1+1)}\\">";`
     );
   });
+
   it('should enable interpolations when using interpolate flag', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?interpolate',
       },
       '<img src="${"Hello " + (1+1)}">'
@@ -155,6 +173,7 @@ describe('loader', () => {
   it('should not change handling of quotes when interpolation is enabled', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?interpolate',
       },
       '<script>{"json": "with \\"quotes\\" in value"}</script>'
@@ -167,6 +186,7 @@ describe('loader', () => {
   it('should enable interpolations when using interpolate=require flag and only require function be translate', () => {
     const result = loader.call(
       {
+        mode: 'development',
         query: '?interpolate=require',
       },
       '<a href="${list.href}"><img src="${require("./test.jpg")}" /></a>'