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 npm
npm install --dev webpack-war-pluginTo 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;
}[];
archiverOptions?: {}
};| 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]) |
archiverOptions [optional] |
Specifies the options that should be used by archiver (used to create the archive). See https://archiverjs.com/docs/ for more information. |
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',
additionalElements: [
{ path: 'context/context.xml', destPath: 'META-INF/context.xml'},
{ path: 'package.json' },
{ path: 'images', destPath: 'assets/images' }
],
archiverOptions: {
zlib: {
level: 9
}
}
}),
...
],
...
};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
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
npm run buildThe build output is stored in dist.
Unit tests are named [tested-component].spec.ts.
They can be run via Mocha with
npm run testTest coverage is measured via nyc and can be triggered with
npm run test:coverageFunctional test fixtures are located in functional_tests.
To set up all fixtures run
npm run test:functional:setupTo execute the tests via Mocha run
npm run test:functionalContinious 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
[email protected].
If you have any questions, ideas, etc. feel free to contact me:
DevWurm
Email: [email protected]
Jabber: [email protected]
Twitter: @DevWurm
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent