在现代Web开发中，工具和技术的集成变得越来越重要。Maven作为一个应用构建和打包工具，已经有超过十年的历史，而Webpack则是近年来非常流行的前端资源打包工具。本文将讨论如何使用Maven来初始化Webpack，并将打包后的资源放置到项目的正确位置，以便Maven能够将其打包成WAR文件。此外，本文还将探讨在使用Eclipse IDE时可能遇到的问题及其解决方案。
首先，来看一个简单的Vue应用程序。将使用Maven来初始化Webpack，并将打包后的文件放入"WebContent"文件夹中，以便Maven能够进一步将其打包成WAR文件。有许多方法可以让Maven运行Webpack，本文将使用"frontend-maven-plugin"插件。
Vue应用程序与之前文章中的例子相似。本文主要讨论Webpack与Maven的集成，而不是Webpack本身。如果对Vue应用程序感兴趣，可以查看之前的文章，或者更好的是，查看Vue的官方文档。Vue应用程序的"package.json"文件如下所示：
{
"name": "a-vue-example-wpack",
"description": "a-vue-example-wpack-version",
"version": "1.0.0",
"author": "Song Li",
"license": "MIT",
"private": true,
"scripts": {
"build-dev": "cross-env NODE_ENV=dev webpack --color",
"build-dev-w": "cross-env NODE_ENV=dev webpack --color --watch",
"build-prod": "cross-env NODE_ENV=production webpack --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1",
"url-loader": "0.6.2"
}
}
"package.json"定义了三个脚本："build-dev"、"build-dev-w"和"build-prod"。这些脚本分别用于在开发模式下运行Webpack，其中"build-dev-w"会在源文件发生更改时重新生成打包文件，这对于开发过程中测试代码非常有用。而"build-prod"则会在生产模式下运行Webpack，并且会对打包文件进行压缩。
"webpack.config.js"定义了Webpack如何生成打包文件。例如，"output.path"指定了Webpack将打包文件放入"WebContent/Vue-app"文件夹中，这样Maven就可以将其打包成WAR文件；"output.filename"指定了打包文件的名称为"build.js"。
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/main.js',
output: {
path: path.resolve(__dirname, '../WebContent/Vue-app'),
publicPath: '/vue-components/dist/',
filename: 'build.js'
},
module: {
rules: [
{ test: /\.css$/, use: ['vue-style-loader', 'css-loader'] },
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: {} } },
{ test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader'} },
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
use: [{ loader: 'url-loader', options: { limit: 10240 } }]
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}, extensions: ['*', '.js', '.vue', '.json']
}
};
if(process.env.NODE_ENV === 'production') {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.optimize.UglifyJsPlugin({})
]);
}
为了在Maven构建过程中运行Webpack，可以在"pom.xml"中添加"frontend-maven-plugin"插件。
com.github.eirslett
frontend-maven-plugin
1.6
install-node-and-npm
install-node-and-npm
generate-resources
npm-install
npm
-prefix Vue-app/ install
webpack-build
npm
-prefix Vue-app/ run build-prod
v8.11.1
5.6.0
在"install-node-and-npm"执行步骤中，插件会将NPM下载到本地计算机。如果NPM已经被之前的构建下载过，它将跳过下载。在"npm-install"执行步骤中，插件会运行"npm install"来下载"package.json"文件中定义的"node_modules"。如果"node_modules"已经被之前的构建下载过，它将跳过下载。在"webpack-build"执行步骤中，插件会运行Webpack，并将Vue应用程序以生产模式打包到"WebContent/Vue-app"文件夹中，以便Maven将其打包成WAR文件。
可以通过执行以下命令来完成完整的Maven构建：
mvn clean install
如果构建成功，将得到一个WAR文件。如果解压缩WAR文件，应该看到"build.js"文件被正确地打包在正确的文件夹中。如果部署并运行应用程序，应该看到应用程序在浏览器中正常运行。
在使用Eclipse IDE时，"frontend-maven-plugin"会将NPM下载到"node"文件夹中，并将"package.json"的依赖项下载到"node_modules"文件夹中。这两个文件夹非常大，对于Eclipse来说太大了。为了使Eclipse正常工作，最好在Eclipse资源过滤器中排除它们。
在开发过程中，需要不断修改组件。通常不希望执行完整的Maven构建，这通常是一个漫长的过程。在成功完成Maven构建后，NPM的副本会被下载到应用程序的根文件夹中的"node"文件夹中，即找到"pom.xml"的文件夹。可以简单地执行以下命令来创建开发打包文件。
node/npm -prefix Vue-app/ run build-dev
"build-dev"生成的"build.js"文件跳过了压缩过程，因此Webpack运行得更快。
node/npm -prefix Vue-app/ run build-dev-w
还可以选择对组件的源文件设置监视器。每当对组件文件进行更改时，Webpack将重新生成"build.js"文件。有了监视器，Webpack针对速度进行了优化。对于一个相当大的应用程序，Webpack打包几乎是在对组件文件进行任何更改后立即重新生成的。