Webpack

This article describes Webpack usage and tips in the MediaWiki ecosystem. Webpack requires a build step which is currently configured manually.

What is Webpack?
Webpack is a JavaScript bundler. It can be thought of as the makefile of the web. That is, it takes a variety of source inputs (JavaScript, CSS, HTML, and more) and generates build product outputs.

Skins and extensions

 * 1) Add any build dependencies. This usually requires at least adding Webpack as an NPM development dependency.
 * 2) Add a Webpack configuration. Ideally, a plain webpack.config.json JSON data file but usually a JavaScript configuration, webpack.config.js.
 * 3) Version your build outputs. Usually, under resources/dist. This may require updates to your linter and .gitignore configurations.
 * 4) Add a shell script to perform the build. This is usually a   script in NPM's package.json file that wraps an arbitrary shell command such as   or.
 * 5) Update your skin.json or extension.json to reference the resources/dist build products. This step links ResourceLoader just-in-time build steps to Webpack ahead-of-time build steps.
 * 6) Revise your readme with any relevant information.

Optional enhancements

 * Add ES5 validation via ESLint. If you're transpiling from one language down to ES5, this test ensures you only actually produce ES5. See example.
 * Add Git attributes. These can be useful for instructing diff and merge tools on how to process versioned build products. See example.
 * Add build and post-build test scripts. Since your can now generate production outputs statically, tests for bundlesize and other analyses are much more practical. See example.
 * Add build product validation. This test is useful for verifying that the source inputs and build product outputs are synchronized. See example.

Libraries and other projects
Libraries and other projects do not use just-in-time build steps and have no other MediaWiki platform requirements except what you build into them. As such, development is independent and standard.

NPM-based workflows are usually used for sharing code. However, skins and extensions that do not use a build step must manually file-copy and version any build products into themselves or Core.