Spring Boot 및 Webpack을 사용하여 프런트엔드 프로젝트 및 플러그인 시스템 구축

현대 웹 애플리케이션의 복잡성이 계속해서 증가함에 따라 우수한 프런트엔드 엔지니어링 및 플러그인 시스템을 구축하는 것이 점점 더 중요해지고 있습니다. Spring Boot와 Webpack의 인기로 인해 프런트엔드 프로젝트와 플러그인 시스템을 구축하기 위한 완벽한 조합이 되었습니다.

Spring Boot는 최소한의 구성 요구 사항으로 Java 애플리케이션을 생성하는 Java 프레임워크입니다. 개발자가 웹 애플리케이션을 더 빠르고 쉽게 구축하고 배포할 수 있도록 자동 구성과 같은 많은 유용한 기능을 제공합니다.

Webpack은 Node.js를 기반으로 하는 프런트엔드 구축 도구입니다. 다양한 언어와 프레임워크를 최소한의 정적 리소스 세트로 컴파일, 패키징 및 최적화할 수 있습니다.

아래에서는 Spring Boot와 Webpack을 사용하여 프런트엔드 프로젝트와 플러그인 시스템을 구축하는 방법을 소개하겠습니다.

1. Spring Boot 프로젝트 만들기

먼저 Spring Boot 프로젝트를 만들어야 합니다. Spring 초기화를 사용하거나 IDE에서 직접 생성할 수 있습니다.

프로젝트를 생성할 때 웹을 종속성으로 선택하고 Spring Boot DevTools 및 Lombok과 같은 몇 가지 일반적인 플러그인을 추가해야 합니다.

2. Webpack 구성 추가

이제 Spring Boot 애플리케이션에 대한 Webpack 구성을 추가해야 합니다. webpack.config.js라는 파일을 생성하고 그 안에 다음 코드를 추가할 수 있습니다:

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main/resources/static/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'src/main/resources/static/dist'),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

이 구성은 소스 파일을 진입점으로 사용하고, Bundle.js라는 파일로 패키징되어 src/에 배치됩니다. /resources/static/dist 디렉토리. 또한 JavaScript 및 React 코드를 컴파일합니다.

위 코드에서는 src/main/resources/static/js/index.js가 진입점이라는 점에 유의하세요. 이는 해당 디렉터리에 index.js라는 파일을 만들고 그 안에 코드를 배치해야 함을 의미합니다.

3. Embedding Webpack

이제 Webpack 구성이 있으므로 이를 애플리케이션에 포함해야 합니다. 이를 위해 Spring Boot 애플리케이션에 Webpack 종속성을 추가해야 합니다.

pom.xml 파일에 다음 콘텐츠를 추가할 수 있습니다.

<dependency>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.11.2</version>
</dependency>

이 플러그인은 애플리케이션을 빌드할 때 Webpack을 자동으로 실행하는 데 도움이 됩니다.

다음으로 application.properties 파일에 다음을 추가해야 합니다.

spring.resources.chain.strategy.content.enabled=true
spring.resources.chain.strategy.content.paths=/**

이렇게 하면 정적 파일이 Spring Boot 리소스 처리 체인에 추가됩니다.

4. Adding React Plugins

이제 Webpack 및 Spring Boot 인프라가 설정되었으며 플러그인 추가를 시작할 준비가 되었습니다. 여기에서는 React 플러그인을 추가하는 방법을 소개하겠습니다.

먼저 React npm 모듈을 설치해야 합니다. 명령줄에서 다음 명령을 실행하세요.

npm install --save react react-dom

이제 index.js 파일에서 React를 사용할 수 있습니다. 예:

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => (
  <div>
    <h1>Hello World!</h1>
  </div>
);

ReactDOM.render(<App />, document.getElementById('app'));

여기에서는 "Hello World!"라는 텍스트가 포함된 div를 렌더링합니다.

5. 앱 빌드 및 실행

이제 플러그인을 추가했으므로 앱을 빌드하고 작동하는지 확인해야 합니다.

다음 명령을 사용하여 앱을 패키징합니다.

./mvnw frontend:install-node-and-npm frontend:npm frontend:webpack

이 작업은 3단계를 수행합니다. 먼저 Node.js와 npm을 설치합니다. 두 번째로 React 모듈을 설치합니다. 마지막으로 Webpack을 실행하여 JavaScript를 패키징합니다. 암호.

이제 애플리케이션을 실행하고 액세스할 수 있습니다. 다음 명령을 사용하여 Spring Boot 서비스를 시작하세요.

./mvnw spring-boot:run

이제 브라우저에서 http://localhost:8080을 방문하여 애플리케이션을 볼 수 있습니다!

6. 요약

이제 Spring Boot와 Webpack을 사용하여 프런트엔드 프로젝트와 플러그인 시스템을 구축하는 방법을 알게 되었습니다. 먼저 Spring Boot 프로젝트와 Webpack 구성을 만든 다음 Webpack과 React 플러그인을 삽입하고 마지막으로 애플리케이션을 빌드하고 실행했습니다.

Spring Boot와 Webpack을 사용하여 프런트엔드 프로젝트와 플러그인 시스템을 구축하면 단일 애플리케이션에서 모든 코드를 쉽게 배포하고 관리할 수 있습니다. 이를 통해 더욱 풍부하고 복잡한 애플리케이션을 보다 쉽게 ​​구축할 수 있습니다.

위 내용은 Spring Boot 및 Webpack을 사용하여 프런트엔드 프로젝트 및 플러그인 시스템 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!