Configuration

Turbopack uses a configuration file to manage its behavior. The configuration file, typically named turbopack.config.js, allows you to define entry points, output settings, loaders, plugins, and more. In this lesson, we will dive deeper into the configuration options available in Turbopack.

Understanding Turbopack Configuration Files

The configuration file is a JavaScript file that exports a configuration object. Here’s a basic example:

javascript

	// Import Turbopack
	const Turbopack = require('turbopack');
	
	// Export the configuration object
	module.exports = {
	  // Entry point of the application
	  entry: './src/index.js',
	
	  // Output configuration
	  output: {
	    path: __dirname + '/dist',
	    filename: 'bundle.js'
	  },
	
	  // Module rules to handle different file types
	  module: {
	    rules: [
	      {
	        // Process JavaScript files
	        test: /\.js$/,
	        exclude: /node_modules/,
	        use: 'babel-loader'
	      },
	      {
	        // Process CSS files
	        test: /\.css$/,
	        use: ['style-loader', 'css-loader']
	      }
	    ]
	  },
	
	  // Plugins to extend Turbopack's functionality
	  plugins: [
	    // Example plugin
	    new Turbopack.PluginName()
	  ]
	};

Common Configuration Options

Entry Points: The entry property specifies the entry point(s) of your application. This is the file where Turbopack starts bundling.
javascript
```
	entry: './src/index.js',
```
Output: The output property defines the location and name of the bundled files.
javascript
```
	output: {
	  path: __dirname + '/dist',
	  filename: 'bundle.js',
	},
```
Module Rules: The module property contains rules that specify how different file types should be processed.
- JavaScript Files: Use babel-loader to transpile JavaScript files.
  javascript
```
	{
	  test: /\.js$/,
	  exclude: /node_modules/,
	  use: 'babel-loader',
	},
```
- CSS Files: Use style-loader and css-loader to process CSS files.
  javascript
```
	{
	  test: /\.css$/,
	  use: ['style-loader', 'css-loader'],
	},
```
Plugins: The plugins property allows you to add plugins to extend Turbopack’s functionality. You can use built-in plugins or third-party plugins.
javascript
```
	plugins: [
	  new Turbopack.PluginName(),
	],
```

Example: Advanced Configuration

Let’s look at a more advanced configuration that includes HTML file handling and environment variables.

javascript

	const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const Dotenv = require('dotenv-webpack');
	
	module.exports = {
	  entry: './src/index.js',
	  output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: 'bundle.js'
	  },
	  module: {
	    rules: [
	      {
	        test: /\.js$/,
	        exclude: /node_modules/,
	        use: 'babel-loader'
	      },
	      {
	        test: /\.css$/,
	        use: ['style-loader', 'css-loader']
	      },
	      {
	        test: /\.html$/,
	        use: 'html-loader'
	      }
	    ]
	  },
	  plugins: [
	    new HtmlWebpackPlugin({
	      template: './src/index.html'
	    }),
	    new Dotenv()
	  ]
	};

HTML Files: Use html-loader to process HTML files.

javascript

	{
	  test: /\.html$/,
	  use: 'html-loader',
	},

Environment Variables: Use dotenv-webpack to manage environment variables.
javascript
```
	new Dotenv(),
```

This configuration demonstrates how to handle various file types and integrate environment variables into your project.