Webpack WAR plugin

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.

Installation

You can install the plugin via yarn

yarn add --dev webpack-war-plugin

or via npm

npm install --dev webpack-war-plugin

Usage

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.

Configuration

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]) |

Example

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:

archive.war
|
|\_ file1.js
|
|\_ WEB-INF
|          \_ web.xml
|
|\_ META-INF
|           \_ context.xml
|
|\_ package.json
|
 \_ assets
          \_ images
                   \_ img.png

Development

Typescript

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

Building

After checking out the project you can build transpile the Typescript via

yarn run build

The build output is stored in dist.

Testing

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.

Licensing

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

Collaborating

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 [email protected].

Contact

If you have any questions, ideas, etc. feel free to contact me: DevWurm Email: [email protected] Jabber: [email protected] Twitter: @DevWurm