Rails Glossary > Generate a Rails app with webpack and no importmap

Generate a Rails app with webpack and no importmap

Creates a new Rails application configured with webpack, the most comprehensive JavaScript bundler offering extensive plugin ecosystem, code splitting, and advanced optimization features for complex applications.

Rails applications with webpack bundling

How do you create a Rails app with webpack? Use rails new myapp --javascript=webpack to generate a new Rails application with webpack configured as the JavaScript bundler, providing the most comprehensive feature set including code splitting, hot module replacement, and extensive plugin ecosystem.

The rails new --javascript=webpack command creates Rails applications equipped with the most powerful and flexible JavaScript bundler available. Webpack offers unparalleled configurability and is suitable for complex applications that require a high degree of customization.

Why webpack for complex applications

Code splitting capabilities enable intelligent bundle optimization through dynamic imports. Applications can load only necessary code initially, then fetch additional modules on-demand, dramatically improving initial page load times.

Hot Module Replacement (HMR) provides the most advanced development experience available, updating specific modules without full page reloads while preserving application state.

Webpack supports a wide range of features, including code splitting, hot module replacement, and asset management.

What the Rails generator configures

The generator adds jsbundling-rails to your Gemfile, creates webpack.config.js with Rails-optimized settings, and configures ./bin/dev for coordinated Rails and webpack processes. Node.js and Yarn must be installed when using webpack.

Performance considerations

Webpack's performance can be optimized through various configurations, including code splitting and caching strategies, but its complexity can sometimes lead to longer build times. Webpack takes 41+ seconds to bundle 10 copies of three.js compared to esbuild's sub-second performance.

When to choose webpack

Choose webpack for large-scale applications requiring advanced features like sophisticated code splitting, extensive third-party integrations, or complex asset processing pipelines. Webpack is the go-to choice for large-scale applications that need advanced features and a highly customizable build process.

Try Avo for free