Webpack plugin for bundling build outputs into a WAR archive

Downloads in past


1.0.0-beta.37 years ago7 years agoMinified + gzip package size for webpack-war-plugin in KB


Webpack WAR plugin
Build Status Coverage Status Gitter
This is a Webpack plugin which simplifies and automates the creation of a Web Application Archive (WAR)) from your Webpack build outputs and other project files. This can be useful if you want to deploy your static / Single Page Web App or your applications web frontend to a Java (EE) Application server.


You can install the plugin via yarn
yarn add --dev webpack-war-plugin
or via npm
npm install --dev webpack-war-plugin


Basic Usage

To add the webpack-war-plugin to your build just add an instance of WebpackWarPlugin to the plugins section of your Webpack configuration
const { WebpackWarPlugin } = require('webpack-war-plugin');

module.exports = {
  plugins: [
    new WebpackWarPlugin(),
By default an archive containing all emitted Webpack build outputs is generated in the output directory of your Webpack build. It is named like your project.


You can influence the generated archive by supplying a configuration object of the following structure to the plugins constructor:
type WebpackWarPluginOptions = {
    archiveName?: string;
    webInf?: string;
    additionalElements?: {
        path: string;
        destPath?: string;
| Option | Effect | | --- | --- | | archiveName optional | Sets the output name of the archive | | webInf optional | Specifies a path to a directory (or file) which will be included into the archive with the path WEB-INF | | additionalElements optional | Specifies multiple files or directories, which will be included in the archive. Each entry is a object with the following properties: path (The path of the source element), destPath (optional The path of the specified file / directory inside of the archive by default path is used) |


The following plugin configuration:
const { WebpackWarPlugin } = require('webpack-war-plugin');

module.exports = {
  entry: {
    file1: './src/file1.js'
  plugins: [
    new WebpackWarPlugin({
      archiveName: 'archive',
      webInf: './web-inf',
      additionalElemens: [
        { path: 'context/context.xml', destPath: 'META-INF/context.xml'},
        { path: 'package.json' },
        { path: 'images', destPath: 'assets/images' }
generates an archive with the name archive.war in the Webpack output directory with the following structure:
|\_ file1.js
|          \_ web.xml
|           \_ context.xml
|\_ package.json
 \_ assets
          \_ images
                   \_ img.png



The plugin is built with Typescript and the resulting package contains the corresponding typings.


After checking out the project you can build transpile the Typescript via
yarn run build
The build output is stored in dist.


Unit tests

Unit tests are named [tested-component].spec.ts.
They can be run via Mocha with
yarn run test
Test coverage is measured via nyc and can be triggered with
yarn run test:coverage

Functional tests

Functional test fixtures are located in functional_tests. To set up all fixtures run
yarn run test:functional:setup
To execute the tests via Mocha run
yarn run test:functional

Continuous integration

Continious integration is realized via Travis-CI. Coverage reports are shown on Coveralls. Deployments to NPM are automatically triggered via Git tags.


The app is distributed under the MIT License (read LICENSE for more information). Copyright (c) 2017 Leo Lindhorst


I really appreciate any kind of collaboration!
You can use the GitHub issue tracker for bugs and feature requests or create a pull request to submit changes. If you don't want to use these possibilities, you can also write me an email to devwurm@devwurm.net.


If you have any questions, ideas, etc. feel free to contact me:
Email: devwurm@devwurm.net
Jabber: devwurm@conversations.im
Twitter: @DevWurm