spring-boot 和 webpack-dev-server联合开发

Dean 发布于2019-08-20 11:23 / 488人阅读

摘要：当前前后端架构分离的模式比较流行，前端用或者等方式发布与渲染网页，后端程序只提供的数据接口。但是与结合起来就不太协调。这时候就可以用到的代理模式了。在中添加之后直接启动程序，然后就可以通过访问端口来进行前端的热开发了

当前前后端架构分离的模式比较流行，前端用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端口来进行前端的热开发了

云服务器混合云联合开发 php联合开发 webpack-dev-server spring-boot-编程思想

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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