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>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 following npm dependencies.
<code>yarn add webpack</code>
<code>yarn add webpack-serve --dev</code>

<h3>Usage</h3>

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

For local development, start the dev server with <code>drush webpack:serve</code> and reload the page. The module will detect it and inject the development version (with live reload).

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>How it works?</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.

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

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