Package Exports

@closure-next/webpack
@closure-next/webpack/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@closure-next/webpack) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
    })
  ]
};