Webpack is a popular module bundler for JavaScript applications. By default, Webpack uses module.exports to export modules in CommonJS format, which is the standard module system in Node.js. However, you can configure Webpack to output files with export default instead of module.exports using the ES modules syntax.

Here's how you can configure Webpack to output files with export default:

Step 1: Update Webpack configuration In your Webpack configuration file, you can set the output.libraryTarget option to 'var' or 'umd' to indicate that you want to use the global scope as the target for your library. For example:

javascript
// webpack.config.js module.exports = { // ... other configurations ... output: { // ... other output options ... libraryTarget: 'var' // or 'umd' } };

Step 2: Use ES modules syntax In your source code, you can now use ES modules syntax to export modules with export default. For example:

javascript
// myModule.js const myModule = { // ... module code ... }; export default myModule;

Step 3: Import the module When you import the module in your application, you can use the ES modules syntax to import the default export. For example:

javascript
// app.js import myModule from './myModule.js'; // ... use myModule ...

With this configuration, Webpack will bundle your modules using the ES modules syntax with export default instead of module.exports, allowing you to use modern JavaScript syntax in your application. Please note that this may require additional configuration in your build system or runtime environment to support ES modules correctly, depending on your project's requirements.

Have questions or queries?
Get in Touch