Integrates Drupal with <a href="https://webpack.js.org/" target="_blank">Webpack</a>.

<h3>What it does?</h3>

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.

<h3>Related modules</h3>
<ul>
  <li><a href="https://drupal.org/project/webpack_babel" target="_blank">Webpack Babel</a></li>
  <li><a href="https://drupal.org/project/webpack_vuejs" target="_blank">Webpack Vue.js</a></li>
  <li><a href="https://drupal.org/project/webpack_react" target="_blank">Webpack React</a></li>
</ul>

<h3>Dependencies</h3>

<ul>
  <li><a href="https://drupal.org/project/npm" target="_blank">NPM</a></li>
  <li>drush 9</li>
  <li><code>yarn</code> installed and available in the PATH</li>
</ul>

<h3>Setup</h3>

Your project needs to have a <code>package.json</code> file somewhere up the directory tree. In drupal-composer projects, it is a common practice to place one next to the webroot and the project-wide <code>composer.json</code>. Placing the file inside the webroot would work too. If you don't have such a file, <code>yarn init -yp</code> will generate an empty one.

Once you've got <code>package.json</code>, add the module as a local dependency:

<code>yarn add file:./web/modules/contrib/webpack</code>

<h3>Usage</h3>

Add <code>webpack: true</code> to your library definition in <code>module_name.libraries.yml</code>.

<h4>Local development</h4>

For local development, start the dev server with <code>drush webpack:serve --port 1234</code> and reload the page. The module will detect it and inject the development version (with live reload). It is important to either run it outside of docker containers or set up port forwarding.

When running inside a container add the <code>--docker</code>. 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. <code>--dev-server-host=cli</code> where cli the hostname (i.e. the service name from docker-compose) of the container that runs drush.

<h4>Building for prod</h4>

On the server, add <code>drush webpack:build</code> to your after-deploy steps. The bundles will be written to <code>public://webpack</code> and included automatically.

The output directory can be changed at <code>/admin/config/webpack/settings</code> e.g. to put the files under source control. 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 (<a href="https://github.com/drupal-webpack/webpack/blob/e498e8b2ce8b986fe91b280af7b3797bdfa6f41b/src/Bundler.php#L133" target="_blank">details</a>).

<h3>Know issues</h3>

Some builds can break because of javascript aggregation. It can be disabled at /admin/config/development/performance.

<h3>How does it work?</h3>

Setup steps and the modus operandi have been described in <a href="https://drupal-progressive-decoupling.github.io/#/composer-require-webpack" target="_blank">Progressive Decoupling - The why and the how</a> at Decoupled Drupal Days NY 2018 (<a href="https://www.youtube.com/watch?v=i4Ktx0pz8xI" target="_blank">video</a>).

<h3>Should I use it now?</h3>

It's still in alpha but the usage won't change much.