tiny-webpack

✨ A JavaScript bundler with Webpack-like features, supporting modern frontend workflows.

📦 Features

• 🧩 Loader & Plugin System
• 🕰️ Lazy Loading & Dynamic Import
• 📦 Third-party Module Resolution
• ✂️ Code Splitting & SplitChunks
• 🌳 Tree Shaking
• ⚡ Preload/Prefetch Support
• 🏃 Loader Runner
• 🧠 Multi-page Application (MPA) Support

🚀 Quick Start

Installation

npm install tiny-webpack --save-dev
# or
yarn add tiny-webpack -D

Basic Usage

// jspack.config.js
import { resolve } from 'path'

export default {
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}
// test.js
import { jspack } from 'tiny-webpack'

import jspackOptions from './jspack.config.js'

const compiler = jspack(jspackOptions)
compiler.run((err, stats) => {
  console.log(err, stats.toJson())
})

⚙️ Configuration Guide

Core Options

| Key | Type | Default | Description | |-----|------|---------|-------------| | entry | string/object | - | Entry point(s) | | output.path | string | - | Output directory | | output.filename | string | [name].js | Output filename pattern | | mode | development/production | development | Build environment |

Loader Configuration

// handle less file
export default {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'less-loader'
        ]
      }
    ]
  }
}

Multi-page Application

const HtmlWebpackPlugin = require('html-webpack-plugin')

export default {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/template.html',
      chunks: ['page1'],
      filename: 'page1.html'
    })
  ]
}

🔧 Advanced Features

Code Splitting

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: 10
      }
    }
  }
}

懒加载示例

// dymamic import
button.addEventListener('click', async () => {
  const module = await import('./lazy-module.js')
  module.doSomething()
})

📚 API Reference

Loader Interface

// 自定义loader示例
export default function (source) {
  return `
    import { createElement } from 'react'
    ${source}
  `
}

Plugin Development

class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap('MyPlugin', (assets) => {
      // handle assets here
    })
  }
}

📁 Project Structure

project-root/
├── src/
│   ├── index.js       # entry
│   └── styles.less    # LESS
├── loaders/           # custom loader
├── jspack.config.js   # config
└── dist/              # output

🛠️ Development Guide

custom loader resolver

export default {
  resolveLoader: {
    modules: ['custom_loaders', 'node_modules']
  }
}

performance optimization

// prefetch example
import(/* webpackPrefetch: true */ './critical-module.js')

Contributing

pnpm i
pnpm run dev # tsup 编译 tiny-webpack
cd playground
pnpm build

License

MIT License © Sunny-117