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.

Webpack is enormously popular both in itself and as a wrapped tool. In the latter case, you may be using it already and not know it. For example, both Vue CLI (see vue inspect -v) and Storybook (see start-storybook --debug-webpack) use Webpack.

Skins and extensions

User:Jdlrobson/Developing_with_Webpack_and_ResourceLoader has some practical advice on incorporating Webpack into MediaWiki extensions. This can be summarized as:

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 build script in NPM's package.json file that wraps an arbitrary shell command such as webpack -p or gulp.
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.
7. Add build product validation. This test is useful for verifying that the source inputs and build product outputs are synchronized and essential from a security point of view. See example.

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 bundlesize.config.json for an example.

References

• Vector
• Popups
• WMDE
• MobileFrontend

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.

References

• WVUI
• OOUI

See also

• Official website