Integrates Drupal with webpack.
What does it do?
The module allows developers to have their Drupal libraries bundled by webpack. It makes it easy to import npm packages and use modern javascript that will work across a variety of browsers (with Webpack Babel).
Dependencies
- drush 9+
- yarn
Setup
Your project needs to have a package.json
file somewhere up the directory tree. In drupal-composer projects it is a common practice to place one next to the project-wide composer.json
. If you don't have such a file yarn init -yp
will generate an empty one.
Once you've got package.json
, add the module as a local dependency.
yarn add file:./web/modules/contrib/webpack
Usage
Add webpack: true
to your library definition in module_name.libraries.yml
(example).
Local development
For local development, start the dev server with drush webpack:serve
. The module will detect it and inject the development version (with live reload). Make sure you don't have Bigpipe or JS aggregation enabled locally. It is also important to either run it outside of docker containers or set up port forwarding.
When running inside a container add the --docker
. This alone will work if the webserver is ran in the same container as drush. Otherwise, drupal will need some additional info in order to detect the server, i.e. --dev-server-host=cli
where cli the hostname (or the service name from docker-compose) of the container that runs drush.
Building for prod
On the server, add drush webpack:build
to your after-deploy steps. The bundles will be written to public://webpack
(sites/default/files by default) and included automatically.
The output directory can be changed at /admin/config/webpack/settings
, to put the files under source control for instance. If you set it to a path that is outside of the public files folder make sure to export your site's config after building (details).
Building for contrib
If you're building a contrib module and you don't want to force the end sites to have to set up webpack you can bundle a single library along with all its npm dependencies. The library will work on a plain drupal installation. However, when the end site installs webpack at some point it will detect the lib and do the bundling on the project level, enabling the long-term vendor caching and bundle splitting.
To build a single library set its definition like this and run drush webpack:build-single module_name/library_name
.
Keep in mind that only libraries licensed under GPL 2 or greater can be uploaded to drupal.org.
How does it work?
Setup steps and the modus operandi have been described in Progressive Decoupling - The why and the how at Decoupled Drupal Days NY 2018 (video).
Should I use it now?
It's still in alpha but the usage won't change much.
Project information
- Minimally maintained
Maintainers monitor issues, but fast responses are not guaranteed. - Module categories: Developer Tools
- 25 sites report using this module
- Created by blazey on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 3.x-dev updated 24 Jan 2024 at 15:21 UTC
Development version: 8.x-1.x-dev updated 15 Oct 2022 at 11:55 UTC