Closure Next Webpack Plugin

Webpack integration for Closure Next, providing optimized bundling and code splitting.

Installation

npm install @closure-next/webpack

Usage

// webpack.config.js
import { ClosureNextWebpackPlugin } from '@closure-next/webpack';

export default {
  // ... other webpack config
  plugins: [
    new ClosureNextWebpackPlugin({
      codeSplitting: true,
      treeShaking: true,
      paths: {
        // Custom module resolution
      }
    })
  ]
};

Features

• 🔌 Plug-and-play integration
• 📦 Automatic code splitting
• 🌳 Tree shaking optimization
• 🔧 TypeScript support
• 🗺️ Custom module resolution
• ⚡️ Development optimization

Options

codeSplitting

Enable code splitting for Closure components.

new ClosureNextWebpackPlugin({
  codeSplitting: true
})

treeShaking

Enable tree shaking optimizations.

new ClosureNextWebpackPlugin({
  treeShaking: true
})

paths

Configure custom module resolution paths.

new ClosureNextWebpackPlugin({
  paths: {
    '@components': './src/components'
  }
})

Example Configuration

// webpack.config.js
import { ClosureNextWebpackPlugin } from '@closure-next/webpack';
import path from 'path';

export default {
  entry: './src/index.ts',
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  plugins: [
    new ClosureNextWebpackPlugin({
      codeSplitting: true,
      treeShaking: true,
      paths: {
        '@closure-next': path.resolve(__dirname, 'node_modules/@closure-next')
      }
    })
  ]
};

Development Mode

The plugin automatically configures development-friendly settings:

// webpack.config.dev.js
import { ClosureNextWebpackPlugin } from '@closure-next/webpack';

export default {
  mode: 'development',
  devtool: 'source-map',
  plugins: [
    new ClosureNextWebpackPlugin()
  ]
};

Production Mode

Optimized settings for production:

// webpack.config.prod.js
import { ClosureNextWebpackPlugin } from '@closure-next/webpack';

export default {
  mode: 'production',
  plugins: [
    new ClosureNextWebpackPlugin({
      codeSplitting: true,
      treeShaking: true
    })
  ]
};

TypeScript Support

The plugin includes TypeScript definitions:

import { ClosureNextWebpackPlugin } from '@closure-next/webpack';

const config: webpack.Configuration = {
  plugins: [
    new ClosureNextWebpackPlugin({
      // Type-checked options
    })
  ]
};