Webpack for WebAssembly

Powerful module bundler for WebAssembly projects with modern development, production builds, and optimization features. Start your project now

Core Features

📦

Code Splitting

Split your WebAssembly modules for optimized runtime performance.

⚙️

Build Optimization

Auto-minify WebAssembly and JavaScript with modern optimization strategies.

🔌

Developer Tools

Integrated dev server and hot-reload for real-time development.

Try Webpack for WebAssembly

{`// webpack.config.js
module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.wasm$/,
        type: 'javascript/auto',
        use: 'wasm-loader'
      }
    ]
  }
};`}

Run in browser, or build your own

Why Use Webpack?

🚀 Speed

Bundling performance improvements with parallel WebAssembly builds.

🔧 Extensible

Thousands of plugins available in the Webpack ecosystem.

📦 Tree Shaking

Efficient dead-code elimination for WebAssembly modules.

Getting Started

Install Webpack and required loaders:

$ npm install webpack webpack-cli html-webpack-plugin --save-dev

Create webpack.config.js:

{`const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'production'
};`}

Create an entry point:

{`// src/index.js
import wasm from './src/your-module.wasm';

wasm.then(mod => {
  console.log('Wasm loaded!', mod);
});`}

Build and run:
npm run build