refactor: add mjs support (#2172)

Author: rishabh3112

.eslintignore

@@ -14,5 +14,5 @@ test/**/bin/
 test/**/binary/
 test/**/index.js
 test/typescript/webpack.config.ts
-test/config/error/syntax-error.js
-test/config/error-array/webpack.config.js
+test/config/error-commonjs/syntax-error.js
+test/config/error-mjs/syntax-error.mjs

.prettierignore

@@ -4,6 +4,7 @@ test/**/dist/
 test/**/bin/
 test/**/binary/
 test/**/index.js
-test/config/error/syntax-error.js
+test/config/error-commonjs/syntax-error.js
+test/config/error-mjs/syntax-error.mjs
 packages/webpack-cli/__tests__/test-assets/.yo-rc.json
 test/build-errors/stats.json

packages/webpack-cli/lib/webpack-cli.js

@@ -22,18 +22,40 @@ class WebpackCLI {
     constructor() {}
 
     async resolveConfig(args) {
-        const loadConfig = (configPath) => {
+        const loadConfig = async (configPath) => {
             const ext = extname(configPath);
             const interpreted = Object.keys(jsVariants).find((variant) => variant === ext);
 
             if (interpreted) {
                 rechoir.prepare(extensions, configPath);
             }
 
-            let options;
+            const { pathToFileURL } = require('url');
+
+            let importESM;
 
             try {
-                options = require(configPath);
+                importESM = new Function('id', 'return import(id);');
+            } catch (e) {
+                importESM = null;
+            }
+
+            let options;
+            try {
+                try {
+                    options = require(configPath);
+                } catch (error) {
+                    if (pathToFileURL && importESM && error.code === 'ERR_REQUIRE_ESM') {
+                        const urlForConfig = pathToFileURL(configPath);
+
+                        options = await importESM(urlForConfig);
+                        options = options.default;
+
+                        return { options, path: configPath };
+                    }
+
+                    throw error;
+                }
             } catch (error) {
                 logger.error(`Failed to load '${configPath}'`);
                 logger.error(error);
@@ -91,7 +113,7 @@ class WebpackCLI {
                         process.exit(2);
                     }
 
-                    const loadedConfig = loadConfig(configPath);
+                    const loadedConfig = await loadConfig(configPath);
 
                     return evaluateConfig(loadedConfig, args);
                 }),
@@ -136,7 +158,7 @@ class WebpackCLI {
             }
 
             if (foundDefaultConfigFile) {
-                const loadedConfig = loadConfig(foundDefaultConfigFile.path);
+                const loadedConfig = await loadConfig(foundDefaultConfigFile.path);
                 const evaluatedConfig = await evaluateConfig(loadedConfig, args);
 
                 config.options = evaluatedConfig.options;

test/config-format/mjs/main.js

@@ -0,0 +1 @@
+console.log('You know who');

test/config-format/mjs/mjs.test.js

@@ -0,0 +1,18 @@
+const { run } = require('../../utils/test-utils');
+
+describe('webpack cli', () => {
+    it('should support mjs config format', () => {
+        const { exitCode, stderr, stdout } = run(__dirname, ['-c', 'webpack.config.mjs'], false, [], { DISABLE_V8_COMPILE_CACHE: true });
+
+        if (exitCode === 0) {
+            expect(exitCode).toBe(0);
+            expect(stderr).toContain('Compilation starting...');
+            expect(stderr).toContain('Compilation finished');
+            expect(stdout).toBeTruthy();
+        } else {
+            expect(exitCode).toBe(2);
+            expect(/Cannot use import statement outside a module/.test(stderr) || /Unexpected token/.test(stderr)).toBe(true);
+            expect(stdout).toBeFalsy();
+        }
+    });
+});

test/config-format/mjs/webpack.config.mjs

@@ -0,0 +1,11 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
+
+export default {
+    mode: 'production',
+    entry: './main.js',
+    output: {
+        path: path.resolve(path.dirname(fileURLToPath(import.meta.url)), 'dist'),
+        filename: 'foo.bundle.js',
+    },
+};

test/config/defaults/mjs-config/default-mjs-config.test.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+const { run, isWebpack5 } = require('../../../utils/test-utils');
+
+describe('Default Config:', () => {
+    it('Should be able to pick mjs config by default', () => {
+        const { exitCode, stderr, stdout } = run(__dirname, [], false, [], { DISABLE_V8_COMPILE_CACHE: true });
+
+        if (exitCode === 0) {
+            expect(exitCode).toEqual(0);
+            expect(stderr).toContain('Compilation starting...');
+            expect(stderr).toContain('Compilation finished');
+            // default entry should be used
+            expect(stdout).toContain('./src/index.js');
+            // should pick up the output path from config
+            expect(stdout).toContain('test-output');
+
+            if (!isWebpack5) {
+                expect(stdout).toContain('Hash');
+                expect(stdout).toContain('Version');
+                expect(stdout).toContain('Built at');
+                expect(stdout).toContain('Time');
+            }
+
+            // check that the output file exists
+            expect(fs.existsSync(path.join(__dirname, '/dist/test-output.js'))).toBeTruthy();
+        } else {
+            expect(exitCode).toEqual(2);
+            expect(stderr).toContain('Unexpected token');
+            expect(stdout).toBeFalsy();
+        }
+    });
+});

test/config/defaults/mjs-config/src/index.js

@@ -0,0 +1 @@
+console.log("Jotaro Kujo")

test/config/defaults/mjs-config/webpack.config.mjs

@@ -0,0 +1,6 @@
+export default {
+    mode: 'development',
+    output: {
+        filename: 'test-output.js',
+    },
+};