Webpack
 | This page is currently a draft.
|
This article describes Webpack usage and tips in the MediaWiki ecosystem. Webpack requires a build step which is currently configured manually.
What is Webpack?
[edit]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
[edit]User:Jdlrobson/Developing_with_Webpack_and_ResourceLoader has some practical advice on incorporating Webpack into MediaWiki extensions. This can be summarized as:
- Add any build dependencies. This usually requires at least adding Webpack as an NPM development dependency.
- Add a Webpack configuration. Ideally, a plain webpack.config.json JSON data file but usually a JavaScript configuration, webpack.config.js.
- Version your build outputs. Usually, under resources/dist. This may require updates to your linter and .gitignore configurations.
- Add a shell script to perform the build. This is usually a
buildscript in NPM's package.json file that wraps an arbitrary shell command such aswebpack -porgulp. - 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.
- Revise your readme with any relevant information.
- 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
[edit]- 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
[edit]Libraries and other projects
[edit]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.