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

joseprio · evilebottnawi · commit 9b9cd8d22b3d · 2019-11-21T17:37:28.000+03:00
diff --git 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
@@ -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
@@ -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
@@ -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();
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -59,8 +59,11 @@ export default function loader(content) {`
`59`	`59`	`this.emitFile(outputPath, content);`
`60`	`60`	`}`
`61`	`61`
	`62`	`+ const esModules =`
	`63`	`+ typeof options.esModules === 'boolean' && options.esModules === true;`
	`64`	`+`
`62`	`65`	`// TODO revert to ES2015 Module export, when new CSS Pipeline is in place`
`63`		- return `module.exports = ${publicPath};`;
	`66`	+ return `${esModules ? 'export default' : 'module.exports ='} ${publicPath};`;
`64`	`67`	`}`
`65`	`68`
`66`	`69`	`export const raw = true;`