65.9K
CodeProject 正在变化。 阅读更多。
Home

关于 Webpack & Maven 的说明

李松博士
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2018 年 4 月 15 日

CPOL

4分钟阅读

viewsIcon

25880

downloadIcon

202

Webpack & Maven 的说明。

引言

这是关于 Webpack & Maven 的一篇说明。

背景

Webpack 近来是一个流行的 Web 开发工具，而 Maven 则是一个流行的应用程序构建和打包工具，已有一十多年历史。在这篇说明中，我将讨论以下两个问题。

  • 如何使用 Maven 启动 Webpack，并将打包后的文件放置在项目的正确位置，以便 Maven 进一步将其打包到 WAR 文件中。
  • 如何解决 IDE 的一些问题。在这篇说明中，我将仅讨论 Eclipse。

附件是一个简单的 Webpack 风格的 Vue 应用程序。我将使用 Maven 来启动 Webpack，并将打包后的文件放入 "WebContent" 文件夹中，以便 Maven 进一步将其打包到 WAR 文件中。Maven 有许多运行 Webpack 的方法，在这篇说明中，我将使用 "frontend-maven-plugin"。

Vue 应用

Vue 应用程序与我之前说明中的示例相同。这篇说明是关于 Webpack & Maven 的，而不是 Webpack 本身。我不会在示例上花费太多时间。如果您感兴趣，可以查看我之前的说明，或者更好的是，查看 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"
  }
}

除了 NPM 依赖之外，"package.json" 还定义了三个脚本：

  • "build-dev" - 执行此脚本将以开发模式运行 Webpack，打包的文件不会被压缩。
  • "build-dev-w" - 执行此脚本将以开发模式运行 Webpack，打包的文件不会被压缩。同时，会在源文件上启动一个监视器。每当源文件被修改时，Webpack 都会重新生成打包文件。这在您开发代码时非常有用，这样您就不必重新构建整个应用程序来测试您的代码。
  • "build-prod" - 执行此脚本将以生产模式运行 Webpack，打包的文件会被压缩。对于大型应用程序，压缩过程通常是一个耗时的过程。

"webpack.config.js" 定义了 Webpack 如何生成打包文件。

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({})])}
  • "output.path = path.resolve(__dirname, '../WebContent/Vue-app')" 条目告诉 Webpack 将打包文件放在 "WebContent/Vue-app" 文件夹中，以便 Maven 可以将其打包到 WAR 文件中；
  • "output.filename = 'build.js'" 条目告诉 Webpack 将打包文件命名为 "build.js"。

最后，"index.html" 文件将使用 "build.js" 文件在浏览器中显示 Vue 组件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-wpack-maven</title>
    
<style type="text/css">
* {
    box-sizing: border-box;
}
</style>
</head>
<body>
<div id="app"></div>
    
<script src="Vue-app/build.js"></script>
</body>
</html>

Webpack & Maven

要在 Maven 构建过程中运行 Webpack，我们可以在 "pom.xml" 中添加 "frontend-maven-plugin"。

<build>
        <plugins>
            
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.6</version>
    
                <executions>
                    <execution>
                        <id>install-node-and-npm</id>
                        <goals><goal>install-node-and-npm</goal></goals>
                        <phase>generate-resources</phase>
                    </execution>
    
                    <execution>
                        <id>npm-install</id>
                        <goals><goal>npm</goal></goals>
                        <configuration>
                            <arguments>-prefix Vue-app/ install</arguments>
                        </configuration>
                    </execution>
    
                    <execution>
                        <id>webpack-build</id>
                        <goals><goal>npm</goal></goals>
                        <configuration>
                            <arguments>-prefix Vue-app/ run build-prod</arguments>
                        </configuration>
                    </execution>
                </executions>
                
                <configuration>
                    <nodeVersion>v8.11.1</nodeVersion>
                    <npmVersion>5.6.0</npmVersion>
                </configuration>
            </plugin>

        </plugins>
</build>
  • 在 "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" 文件已整齐地打包到正确的文件夹中。如果您部署并运行应用程序，您应该会看到应用程序在浏览器中运行良好。

IDE - Eclipse

"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 打包文件的重新生成几乎是瞬时的。

关注点

  • 这是关于 Webpack & Maven 的一篇说明。
  • 希望您喜欢我的博文，并希望这篇笔记能以某种方式帮助您。

历史

  • 2018/4/1/4：首次修订
© . All rights reserved.