spring-boot 和 webpack-dev-server聯合開發

Dean 發布于2019-08-20 11:23 / 585人閱讀

摘要：當前前后端架構分離的模式比較流行，前端用或者等方式發布與渲染網頁，后端程序只提供的數據接口。但是與結合起來就不太協調。這時候就可以用到的代理模式了。在中添加之后直接啟動程序，然后就可以通過訪問端口來進行前端的熱開發了

當前前后端架構分離的模式比較流行，前端用Nodejs或者ngnix等方式發布與渲染網頁，后端程序只提供restful的數據接口。但對于一些小項目來說，并不想讓前后端如此分離，還是希望用spring-boot的內置tomcat來serve static content。

如果只是用前端工具的話，webpack是一個很好的打包方式，webpack-dev-server給我們提供了很好的在線調試與修改。但是與spring-boot結合起來就不太協調。這時候就可以用到webpack-dev-server的代理模式了。通過webpack-dev-server來代理spring-boot中tomcat的端口（默認8080）

這里貼出我的一個配置文件

// webpack.config.js

var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    devtool: "source-map",
    entry: [
        "webpack-dev-server/client?http://localhost:3000",
        "webpack/hot/only-dev-server",
        "./src/main/web/index.js"
    ],
    output: {
        path: "./src/main/resources/static",
        filename: "index.js",
        publicPath: "http://localhost:3000/"
    },
    module: {
        loaders: [
            {test: /.css$/, loader: "style!css"},
            {
                test: /.js$/, loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["es2015"]
                }
            },
            { test: /.(png|jpg|jpeg|gif|woff)$/, loader: "url-loader?limit=8192" },
            { test: /.html$/, loader: "html"},
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new HtmlWebpackPlugin({
        template: "./src/main/web/index.tmpl"
    })],
    devServer: {
        port: 3000,
        proxy: {
            "**": {
                target: "http://localhost:8080",
                secure: false,
                prependPath: false
            }
        },
        publicPath: "http://localhost:3000/",
        historyApiFallback: true
    }
};

在這里我們可以看到，通過webpack-dev-server的3000端口去代理8080端口。在package.json中添加

  "scripts": {
    "webpack": "webpack",
    "watch": "webpack-dev-server --inline"
  },

之后直接啟動spring boot程序，然后npm run watch就可以通過訪問3000端口來進行前端的熱開發了

云服務器 GPU云服務器聯合開發 php聯合開發 webpack-dev-server spring-boot-編程思想

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80546.html

SpringBoot 入門簡介

摘要：這里使用的是數據庫啟動類上加上注解在啟動類中添加對包掃描掃描多個包下的可以有以下幾種方法掃描會自動加載相關配置，數據源就會自動注入到中，會自動注入到中，可以直接使用。有配置文件下的使用掃描多個包下的可以有以下幾種方法掃描 Spring-Boot 學習筆記 1 Spring-Boot 介紹 1.1 什么是Spring-Boot Spring-Boot是由Pivotal團隊提供的全新框架...

chuyao 2019-08-19 11:16 評論0 收藏0
SpringBoot熱部署加持

摘要：概述進行的開發過程中，我們很多時候經常需要重啟服務器才能保證修改的源代碼文件或者一些諸如的配置文件以及一些靜態文件生效，這樣耗時又低效。 showImg(https://segmentfault.com/img/remote/1460000015363888); 概述進行SpringBoot的Web開發過程中，我們很多時候經常需要重啟Web服務器才能保證修改的源代碼文件、或者一些...

ixlei 2019-08-16 12:34 評論0 收藏0
Spring Boot （一）helloworld

摘要：第二個類級別注解是。將引導應用程序，啟動，從而啟動自動配置服務器。比如想使用不同版本的，具體如下在標簽中還可以指定編譯的版本和項目的編碼格式指定項目編碼為使用插件可以為項目提供的操作方式，的個，默認。引言 Spring 框架對于很多 Java 開發人員來說都不陌生。Spring 框架包含幾十個不同的子項目，涵蓋應用開發的不同方面。如此多的子項目和組件，一方面方便了開發人員的使用，另外...

go4it 2019-08-19 10:43 評論0 收藏0
Intellij IDEA 開發 Spring-boot項目熱部署，自動部署

摘要：使用開發項目熱部署，自動部署使用開發項目，即使項目使用了，修改了類或者等，還是不會自動重啟，非要手動去一下或者重啟，就更沒有使用熱部署一樣。使用Intellij IDEA 開發 Spring-boot項目熱部署，自動部署使用Intellij IDEA 開發 Spring-boot項目，即使項目使用了spring-boot-devtools，修改了類或者html、js等，idea還...

zengdongbao 2019-08-16 15:10 評論0 收藏0
SpringBoot 1024行代碼 - 系統監控工具 Actuator簡介

摘要：前言在生產環境中，我們比較關心任意時刻一個的運行情況。調用接口返回結果我們猜測這個應該是表示應用程序正在正常運行。調用接口返回結果似乎什么都沒發生，沒關系，我們繼續進行。我們繼續試了上文列舉的若干接口，發現大部分返回結果都是未授權。前言在生產環境中，我們比較關心任意時刻一個JVM的運行情況。SpringBoot為我們提供了一個方便的功能模塊Actuator。只要簡單幾步就可以為我們...

darkerXi 2019-08-15 12:27 評論0 收藏0