利用webpack-war-plugin打war包

如何使用 webpack 将前端打成 war 包呢？其实 webpack 的插件库中提供了一个叫 webpack-war-plugin 的插件，可以很便捷的做到这一点。

先提供一下插件地址

• 安装 webpack-war-plugin

npm install -D webpack-war-plugin

• 我这里是 vue-cli3 的环境，所以需要先新建 vue.config.js 文件

"use strict";
const { WebpackWarPlugin } = require("webpack-war-plugin");
// 开发模式
const isDevMode = process.env.NODE_ENV === "development";

const plugins = [];

// 只有在打包时才需要用到 webpack-war-plugin 这个插件
if (!isDevMode) {
  plugins.push(
    new WebpackWarPlugin({
      archiveName: "test",
      webInf: "./web-inf",
      additionalElemens: [
        { path: "context/context.xml", destPath: "META-INF/context.xml" },
        { path: "package.json" },
        { path: "images", destPath: "assets/images" },
      ],
    })
  );
}

let webpack = {
  plugins,
};

module.exports = {
  configureWebpack: webpack,
};

• 最后运行 npm run build 进行打包，我这里报了一个缺少 core-js 库中一个文件的错误，我重新安装了一下 core-js 就好了。