feat: new esModules option to output ES modules

Author: alexander-akait

package-lock.json

@@ -45,12 +45,12 @@
   "dependencies": {
     "loader-utils": "^1.2.3",
     "mime": "^2.4.4",
-    "schema-utils": "^2.4.1"
+    "schema-utils": "^2.5.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.6.2",
-    "@babel/core": "^7.6.2",
-    "@babel/preset-env": "^7.6.2",
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/preset-env": "^7.7.1",
     "@commitlint/cli": "^8.2.0",
     "@commitlint/config-conventional": "^8.2.0",
     "@webpack-contrib/defaults": "^5.0.2",
@@ -60,19 +60,19 @@
     "cross-env": "^6.0.3",
     "del": "^5.1.0",
     "del-cli": "^3.0.0",
-    "eslint": "^6.5.1",
-    "eslint-config-prettier": "^6.3.0",
+    "eslint": "^6.6.0",
+    "eslint-config-prettier": "^6.7.0",
     "eslint-plugin-import": "^2.18.2",
     "file-loader": "^4.2.0",
-    "husky": "^3.0.8",
+    "husky": "^3.1.0",
     "jest": "^24.9.0",
-    "jest-junit": "^8.0.0",
-    "lint-staged": "^9.4.1",
-    "memory-fs": "^0.4.1",
+    "jest-junit": "^9.0.0",
+    "lint-staged": "^9.4.3",
+    "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.18.2",
-    "standard-version": "^7.0.0",
-    "webpack": "^4.41.0"
+    "prettier": "^1.19.1",
+    "standard-version": "^7.0.1",
+    "webpack": "^4.41.2"
   },
   "keywords": [
     "webpack"

package.json

@@ -46,7 +46,9 @@ export default function loader(src) {
       src = Buffer.from(src);
     }
 
-    return `module.exports = ${JSON.stringify(
+    return `${
+      options.esModules ? 'export default' : 'module.exports ='
+    } ${JSON.stringify(
       `data:${mimetype || ''};base64,${src.toString('base64')}`
     )}`;
   }

src/index.js

@@ -37,6 +37,9 @@
           "type": "object"
         }
       ]
+    },
+    "esModules": {
+      "type": "boolean"
     }
   },
   "additionalProperties": true

src/options.json

@@ -23,3 +23,8 @@ exports[`validate options 3`] = `
     * options.fallback should be an object:
       object { loader?, options? }"
 `;
+
+exports[`validate options 4`] = `
+"Invalid options object. URL Loader has been initialised using an options object that does not match the API schema.
+ - options.esModules should be a boolean."
+`;

test/__snapshots__/loader.test.js.snap

@@ -30,21 +30,25 @@ const output = (config) => {
       __dirname,
       `../outputs/${config.output ? config.output : ''}`
     ),
-    filename: '[name].js',
+    filename: '[name].bundle.js',
     chunkFilename: '[name].chunk.js',
   };
 };
 
 export default function(fixture, config, options) {
   // eslint-disable-next-line no-param-reassign
   config = {
-    mode: 'development',
+    mode: config.mode || 'development',
     devtool: config.devtool || 'sourcemap',
     context: path.resolve(__dirname, '..', 'fixtures'),
     entry: `./${fixture}`,
     output: output(config),
     module: modules(config),
     plugins: plugins(config),
+    optimization: {
+      minimize: false,
+      runtimeChunk: false,
+    },
   };
 
   // eslint-disable-next-line no-param-reassign

test/__snapshots__/validate-options.test.js.snap renamed to test/__snapshots__/validation-options.test.js.snap

@@ -36,4 +36,41 @@ describe('Loader', () => {
     expect(errors).toMatchSnapshot('errors');
     expect(warnings).toMatchSnapshot('warnings');
   });
+
+  it('should work with ModuleConcatenationPlugin', async () => {
+    const config = {
+      mode: 'production',
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          esModules: true,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+
+    expect(
+      stats.compilation.assets['main.bundle.js'].source()
+    ).toMatchSnapshot();
+  });
+
+  it('should work with ModuleConcatenationPlugin with fallback', async () => {
+    const config = {
+      mode: 'production',
+      loader: {
+        test: /(png|jpg|svg)/,
+        options: {
+          esModules: true,
+          limit: 10,
+        },
+      },
+    };
+
+    const stats = await webpack('fixture.js', config);
+
+    expect(
+      stats.compilation.assets['main.bundle.js'].source()
+    ).toMatchSnapshot();
+  });
 });

test/esModules-options.js

@@ -42,4 +42,8 @@ it('validate options', async () => {
     })
   ).not.toThrow();
   expect(() => validate({ fallback: true })).toThrowErrorMatchingSnapshot();
+
+  expect(() => validate({ esModules: true })).not.toThrow();
+  expect(() => validate({ esModules: false })).not.toThrow();
+  expect(() => validate({ esModules: 'true' })).toThrowErrorMatchingSnapshot();
 });