feat: new options flag to output ES2015 modules (#340)

Author: joseprio

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).

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;

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\\";",
+}
+`;

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();
+  });
+});