refactor: esModule is set to true by default (#344)

BREAKING CHANGE: the `esModule` option is `true` by default, it means we generate `import ... from ...` for sources instead `require`

Author: cap-Bernardito

README.md

@@ -55,7 +55,7 @@ module.exports = {
 |   **[`attributes`](#attributes)**   | `{Boolean\|Object}` |                    `true`                    | Enables/Disables attributes handling             |
 | **[`preprocessor`](#preprocessor)** |    `{Function}`     |                 `undefined`                  | Allows pre-processing of content before handling |
 |     **[`minimize`](#minimize)**     | `{Boolean\|Object}` | `true` in production mode, otherwise `false` | Tell `html-loader` to minimize HTML              |
-|     **[`esModule`](#esmodule)**     |     `{Boolean}`     |                   `false`                    | Use ES modules syntax                            |
+|     **[`esModule`](#esmodule)**     |     `{Boolean}`     |                    `true`                    | Enable/disable ES modules syntax                 |
 
 ### `attributes`
 
@@ -488,12 +488,12 @@ module.exports = {
 ### `esModule`
 
 Type: `Boolean`
-Default: `false`
+Default: `true`
 
-By default, `html-loader` generates JS modules that use the CommonJS modules syntax.
+By default, `html-loader` generates JS modules that use the ES modules syntax.
 There are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).
 
-You can enable a ES module syntax using:
+You can enable a CommonJS modules syntax using:
 
 **webpack.config.js**
 
@@ -505,7 +505,7 @@ module.exports = {
         test: /\.html$/i,
         loader: 'html-loader',
         options: {
-          esModule: true,
+          esModule: false,
         },
       },
     ],

src/utils.js

@@ -781,7 +781,7 @@ export function normalizeOptions(rawOptions, loaderContext) {
     attributes: getAttributesOption(rawOptions),
     minimize: getMinimizeOption(rawOptions, loaderContext),
     esModule:
-      typeof rawOptions.esModule === 'undefined' ? false : rawOptions.esModule,
+      typeof rawOptions.esModule === 'undefined' ? true : rawOptions.esModule,
   };
 }
 

test/__snapshots__/attributes-option.test.js.snap

@@ -4,13 +4,13 @@ exports[`'process' option should work with Async "preprocessor" Function option:
 
 exports[`'process' option should work with Async "preprocessor" Function option: module 1`] = `
 "// Imports
-var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
-var ___HTML_LOADER_IMPORT_0___ = require(\\"./image.png\\");
+import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___HTML_LOADER_IMPORT_0___ from \\"./image.png\\";
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var code = \\"<div>\\\\n  <p>Alexander Krasnoyarov</p>\\\\n  <img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" alt=\\\\\\"alt\\\\\\" />\\\\n<div>\\\\n\\";
 // Exports
-module.exports = code;"
+export default code;"
 `;
 
 exports[`'process' option should work with Async "preprocessor" Function option: result 1`] = `
@@ -27,15 +27,15 @@ exports[`'process' option should work with the "preprocessor" option #2: errors
 
 exports[`'process' option should work with the "preprocessor" option #2: module 1`] = `
 "// Imports
-var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
-var ___HTML_LOADER_IMPORT_0___ = require(\\"./image.png.webp\\");
-var ___HTML_LOADER_IMPORT_1___ = require(\\"./image.png\\");
+import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___HTML_LOADER_IMPORT_0___ from \\"./image.png.webp\\";
+import ___HTML_LOADER_IMPORT_1___ from \\"./image.png\\";
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
 var code = \\"<picture><source type=\\\\\\"image/webp\\\\\\" srcset=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\"><img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_1___ + \\"\\\\\\"></picture>\\\\n\\";
 // Exports
-module.exports = code;"
+export default code;"
 `;
 
 exports[`'process' option should work with the "preprocessor" option #2: result 1`] = `
@@ -49,13 +49,13 @@ exports[`'process' option should work with the "preprocessor" option: errors 1`]
 
 exports[`'process' option should work with the "preprocessor" option: module 1`] = `
 "// Imports
-var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
-var ___HTML_LOADER_IMPORT_0___ = require(\\"./image.png\\");
+import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___HTML_LOADER_IMPORT_0___ from \\"./image.png\\";
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var code = \\"<div>\\\\n  <p>Alexander Krasnoyarov</p>\\\\n  <img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\" alt=\\\\\\"alt\\\\\\" />\\\\n<div>\\\\n\\";
 // Exports
-module.exports = code;"
+export default code;"
 `;
 
 exports[`'process' option should work with the "preprocessor" option: result 1`] = `
@@ -72,15 +72,15 @@ exports[`'process' option should work with the Async "preprocessor" Function opt
 
 exports[`'process' option should work with the Async "preprocessor" Function option #2: module 1`] = `
 "// Imports
-var ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ = require(\\"../../src/runtime/getUrl.js\\");
-var ___HTML_LOADER_IMPORT_0___ = require(\\"./image.png.webp\\");
-var ___HTML_LOADER_IMPORT_1___ = require(\\"./image.png\\");
+import ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___ from \\"../../src/runtime/getUrl.js\\";
+import ___HTML_LOADER_IMPORT_0___ from \\"./image.png.webp\\";
+import ___HTML_LOADER_IMPORT_1___ from \\"./image.png\\";
 // Module
 var ___HTML_LOADER_REPLACEMENT_0___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_0___);
 var ___HTML_LOADER_REPLACEMENT_1___ = ___HTML_LOADER_GET_SOURCE_FROM_IMPORT___(___HTML_LOADER_IMPORT_1___);
 var code = \\"<picture><source type=\\\\\\"image/webp\\\\\\" srcset=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_0___ + \\"\\\\\\"><img src=\\\\\\"\\" + ___HTML_LOADER_REPLACEMENT_1___ + \\"\\\\\\"></picture>\\\\n\\";
 // Exports
-module.exports = code;"
+export default code;"
 `;
 
 exports[`'process' option should work with the Async "preprocessor" Function option #2: result 1`] = `