当前前后端架构星散的形式比较盛行，前端用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端口来举行前端的热开发了