将WebPack与Spring Boot一起使用
#前端 #webpack #node #springboot

WebPack是前端开发的强大工具。它使我们能够改善JavaScript/CSS/SCSS代码的结构，并为生产使用准备。我们如何将WebPack集成到我们的Spring Boot应用程序？

扰流板：在Bootify的免费计划中，可以使用其自定义数据库模式和前端堆栈初始化Spring Boot应用程序。 这包括带有bootstrap或尾风CSS的WebPack ，因此您可以获得以下配置，包括DevServer和Integration，并构建集成完全匹配您的单个设置。 Open your project-直接在浏览器中不注册。

准备node.js

使用WebPack的起点是Node.js，它使用NPM来管理前端的外部依赖关系。为此，我们首先需要在春季启动项目的顶级文件夹中创建package.json。

{
  "name": "my-app-frontend",
  "author": "Bootify.io",
  "scripts": {
    "devserver": "webpack serve --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.7",
    "bootstrap": "^5.2.3"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "autoprefixer": "10.4.14",
    "babel-loader": "^9.1.2",
    "css-loader": "^6.7.3",
    "css-minimizer-webpack-plugin": "^5.0.0",
    "mini-css-extract-plugin": "^2.7.5",
    "postcss-loader": "^7.2.4",
    "postcss-preset-env": "^8.3.2",
    "sass": "^1.62.0",
    "sass-loader": "^13.2.2",
    "style-loader": "^3.3.2",
    "warnings-to-errors-webpack-plugin": "^2.3.0",
    "webpack": "^5.80.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.3"
  }
}

- 我们的软件包。

在scripts部分中，我们可以定义可以使用npm run <script-name>执行的自己的命令。在这里，我们已经准备在开发过程中启动我们将使用的开发服务器，并构建我们的JS/CSS文件在我们的Spring Boot应用程序的最终罐子中使用。背景以后。

在dependencies部分中是在实际交付的前端中的浏览器中可用的库。在我们的示例中，我们在当前版本5.2.3和所需的Popper中包括Bootstrap。在devDependencies中，是与开发相关的软件包，并且在浏览器中将不可用。特别是此处包括WebPack以及处理我们的JS/CSS文件的其他依赖项。

创建package.json并在系统上安装了node.js后，我们可以使用npm install初始化项目。所有定义的依赖项将自动下载到node_modules文件夹。稍后可以使用npm install <package-name>添加新的必需库。 --save-dev参数将它们放在devDependencies区域。

配置WebPack

管理WebPack的中央文件是webpack.config.js。

module.exports = (env, argv) => ({
  entry: './src/main/resources/js/app.js',
  output: {
    path: path.resolve(__dirname, './target/classes/static'),
    filename: 'js/bundle.js'
  },
  devtool: argv.mode === 'production' ? false : 'eval-source-map',
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/bundle.css"
    }),
    new WarningsToErrorsPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$'/,
        include: path.resolve(__dirname, './src/main/resources/js'),
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.scss$/,
        include: path.resolve(__dirname, './src/main/resources/scss'),
        use: [
          argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                ]
              },
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  resolve: {
    modules: [
      path.resolve(__dirname, './src/main/resources'),
      'node_modules'
    ],
  }
});

- 用于创建bundle.js and bundle.css

的webpack配置

entry和output部分定义了处理我们的JS/CSS文件的输入和输出点。入口处是resources/js/app.js文件，但它引用了其他SCSS文件，并将自动将其拆分为构建。借助devtool参数的配置，可以在开发过程中获得源地图，以在浏览器的DevTools中查看我们的实际书面资源。

在optimization和module部分中，我们定义了处理规则。通过使用Babel，我们可以编写现代ES6 JavaScript，该JavaScript将进行最大程度的兼容性。我们用SCSS编写样式，但已将其转换并最小化为CSS以进行以后交付。

为开发设置开发人员

开发过程中建议使用DevServer 能够直接跟踪浏览器中的所有更改。否则，必须在每次更改后运行构建。 DevServer可以使用以下扩展名配置为我们的webpack.config.js。

{
  // ...
  devServer: {
    port: 8081,
    compress: true,
    watchFiles: [
      'src/main/resources/templates/**/*.html',
      'src/main/resources/js/**/*.js',
      'src/main/resources/scss/**/*.scss'
    ],
    proxy: {
      '**': {
        target: 'http://localhost:8080',
        secure: false,
        prependPath: false,
        headers: {
          'X-Devserver': '1',
        }
      }
    }
  }
}

- 配置DevServer

的扩展

使用此设置，DevServer在端口8081上运行，并转发所有请求，它无法在端口8080上回答我们的Spring Boot应用程序。因此，在开发过程中，我们应该通过localhost:8081访问我们的运行应用程序。通过定义watchFiles 浏览器将在每个文件更改后自动重新加载 - 此处HTML扩展名还包括我们的胸腺模板。通过设置hot reload for Thymeleaf。

，这最有效

现在，我们的JS和CSS脚本的集成在我们html的<head>区域中完成了以下扩展。

<link th:if="${T(io.bootify.WebUtils).getRequest().getHeader('X-Devserver') != '1'}"
        th:href="@{/css/bundle.css}" rel="stylesheet" />
<script th:src="@{/js/bundle.js}" defer></script>

集成JS/CSS文件

通过使用DevServer，我们可以包括普通静态资源之类的文件。但是，在开发过程中，DevServer始终与CSS一起提供JavaScript，因此在这种情况下，我们不需要单独包含样式并通过th:if禁用它们。

与Maven或Gradle建立集成

在webpack.config.js中，我们已经定义了处理后的文件写入target/classes/static。因此，它们将包含在我们的最终罐子中，可以作为静态资源访问。

对于与Maven集成的frontend-maven-plugin是必需的。这是mvnw package中的附加步骤，独立下载Node.js并执行npm install和npm run build。

<plugin>
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.12.1</version>
    <executions>
        <execution>
            <id>nodeAndNpmSetup</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
        </execution>
        <execution>
            <id>npmInstall</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>install</arguments>
            </configuration>
        </execution>
        <execution>
            <id>npmRunBuild</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <configuration>
                <arguments>run build</arguments>
            </configuration>
        </execution>
    </executions>
    <configuration>
        <nodeVersion>v18.16.0</nodeVersion>
    </configuration>
</plugin>

对于Gradle，使用节点插件，该插件也执行npm run build。通过配置inputs和outputs，我们启用缓存，如果源文件没有更改。 

plugins {
    // ...
    id 'com.github.node-gradle.node' version '3.6.0'
}

// ...

node {
    download.set(true)
    version.set('18.16.0')
}

task npmRunBuild(type: NpmTask) {
    args = ['run', 'build']
    dependsOn npmInstall

    inputs.files(fileTree('node_modules'))
    inputs.files(fileTree('src/main/resources'))
    inputs.file('package.json')
    inputs.file('webpack.config.js')
    outputs.dir("$buildDir/resources/main/static")
}

processResources {
    dependsOn npmRunBuild
}

- 前端构建中的集成到gradle build

这样，我们已经在Spring Boot App 中使用了为其使用的WebPack！开发过程中的开发人员为我们提供支持，并且使用正确的插件来准备JS/CSS文件并集成到我们的胖罐中。

bootify可用于使用自己的数据库架构和前端来初始化春季启动应用程序。在这里， WebPack可以使用Bootstrap或Tailwind CSS 选择。在专业计划中，可以使用高级项目等高级功能。

可用。

» Start Project on Bootify.io

进一步阅读

Install Node.js

Frontend Maven Plugin

Gradle Plugin for Node