Entry Points and Outputs

Entry Points and Outputs

In this lesson, we will explore how to define entry points and configure output settings in Turbopack. Understanding these concepts is crucial for structuring your project and managing the build process effectively.

Entry Points

The entry point is the starting point for Turbopack to begin bundling your application. You can define a single entry point or multiple entry points depending on your project needs.

1. Single Entry Point: For a basic project, you can define a single entry point.

   javascript Copy

   	module.exports = {
   	  entry: './src/index.js'
   	};

2. Multiple Entry Points: For more complex projects, you might have multiple entry points. For example, you might have separate entry points for different sections of your application.

   javascript Copy

   	module.exports = {
   	  entry: {
   	    main: './src/index.js',
   	    admin: './src/admin.js'
   	  }
   	};

   This configuration will create two separate bundles: main and admin.

Output Configuration

The output configuration specifies where the bundled files should be placed and how they should be named.

1. Basic Output Configuration: The output property defines the path and filename for the bundled files.

   javascript Copy

   	const path = require('path');
   	
   	module.exports = {
   	  entry: './src/index.js',
   	  output: {
   	    path: path.resolve(__dirname, 'dist'),
   	    filename: 'bundle.js'
   	  }
   	};

   In this example, the bundled file will be named bundle.js and placed in the dist directory.

2. Multiple Output Files: When you have multiple entry points, you can customize the output filenames using placeholders.

   javascript Copy

   	const path = require('path');
   	
   	module.exports = {
   	  entry: {
   	    main: './src/index.js',
   	    admin: './src/admin.js'
   	  },
   	  output: {
   	    path: path.resolve(__dirname, 'dist'),
   	    filename: '[name].bundle.js'
   	  }
   	};

   • [name]: This placeholder will be replaced by the entry point name (e.g., main or admin).
   • [hash]: You can also use a hash to ensure unique filenames, which is useful for cache busting.
   javascript Copy

   	output: {
   	  path: path.resolve(__dirname, 'dist'),
   	  filename: '[name].[contenthash].js',
   	},

3. Output Paths: You can further customize the output path to organize your files.

   javascript Copy

   	output: {
   	  path: path.resolve(__dirname, 'dist'),
   	  filename: 'js/[name].[contenthash].js',
   	  publicPath: '/',
   	},

   • path: The directory where the bundled files will be placed.
   • filename: The name of the bundled file. You can use placeholders like [name] and [contenthash].
   • publicPath: The public URL of the output directory when referenced in a browser.

Example: Comprehensive Output Configuration

Here’s an example of a comprehensive output configuration:

	const path = require('path');
	
	module.exports = {
	  entry: {
	    app: './src/app.js',
	    vendor: './src/vendor.js'
	  },
	  output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: 'js/[name].[contenthash].js',
	    publicPath: '/',
	    clean: true // Automatically clean the output directory before each build
	  }
	};

• Entry Points:

  • app: Entry point for the main application.
  • vendor: Entry point for vendor libraries.

• Output Configuration:

  • path: The output directory is set to dist.
  • filename: The bundled files will be named using the entry point name and a content hash.
  • publicPath: The public URL of the output directory.
  • clean: Automatically clean the output directory before each build to remove old files.

This configuration ensures that your output files are well-organized and optimized for production.