From 9b9cd8d22b3dbe4677be9bdd0bf5fbe07815df54 Mon Sep 17 00:00:00 2001
From: Josep del Rio <peprio@gmail.com>
Date: Thu, 21 Nov 2019 14:37:28 +0000
Subject: [PATCH] feat: new options flag to output ES2015 modules (#340)

---
 README.md                                     | 29 +++++++++++
 src/index.js                                  |  5 +-
 .../esModules-option.test.js.snap             | 28 ++++++++++
 test/esModules-option.test.js                 | 51 +++++++++++++++++++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 test/__snapshots__/esModules-option.test.js.snap
 create mode 100644 test/esModules-option.test.js

diff --git a/README.md b/README.md
index f9c99e2..e32e776 100644
--- a/README.md
+++ b/README.md
@@ -375,6 +375,35 @@ module.exports = {
 
 > ℹ️ If `[0]` is used, it will be replaced by the entire tested string, whereas `[1]` will contain the first capturing parenthesis of your regex and so on...
 
+### `esModules`
+
+Type: `Boolean`
+Default: `false`
+
+By default, `file-loader` generates JS modules that use the CommonJS syntax. However, there are some cases in which using ES2015 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/).
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              esModules: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
 ## Placeholders
 
 Full information about placeholders you can find [here](https://github.com/webpack/loader-utils#interpolatename).
diff --git a/src/index.js b/src/index.js
index e058b42..f16e5b7 100644
--- a/src/index.js
+++ b/src/index.js
@@ -59,8 +59,11 @@ export default function loader(content) {
     this.emitFile(outputPath, content);
   }
 
+  const esModules =
+    typeof options.esModules === 'boolean' && options.esModules === true;
+
   // TODO revert to ES2015 Module export, when new CSS Pipeline is in place
-  return `module.exports = ${publicPath};`;
+  return `${esModules ? 'export default' : 'module.exports ='} ${publicPath};`;
 }
 
 export const raw = true;
diff --git a/test/__snapshots__/esModules-option.test.js.snap b/test/__snapshots__/esModules-option.test.js.snap
new file mode 100644
index 0000000..c2ceda7
--- /dev/null
+++ b/test/__snapshots__/esModules-option.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when applied with \`esModules\` option matches snapshot for \`false\` value 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`when applied with \`esModules\` option matches snapshot for \`true\` value 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "export default __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
+
+exports[`when applied with \`esModules\` option matches snapshot without value 1`] = `
+Object {
+  "assets": Array [
+    "9c87cbf3ba33126ffd25ae7f2f6bbafb.png",
+  ],
+  "source": "module.exports = __webpack_public_path__ + \\"9c87cbf3ba33126ffd25ae7f2f6bbafb.png\\";",
+}
+`;
diff --git a/test/esModules-option.test.js b/test/esModules-option.test.js
new file mode 100644
index 0000000..ddf6378
--- /dev/null
+++ b/test/esModules-option.test.js
@@ -0,0 +1,51 @@
+import webpack from './helpers/compiler';
+
+describe('when applied with `esModules` option', () => {
+  it('matches snapshot without value', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
+
+  it('matches snapshot for `true` value', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          esModules: true,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
+
+  it('matches snapshot for `false` value', async () => {
+    const config = {
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          esModules: false,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+    const [module] = stats.toJson().modules;
+    const { assets, source } = module;
+
+    expect({ assets, source }).toMatchSnapshot();
+  });
+});