1.1.0 β’ Published 8 months ago
@closure-next/webpack v1.1.0
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
})
]
};