首页 > 前端采用vue+webpack后端采用java全栈开发,怎么实现自动部署?

前端采用vue+webpack后端采用java全栈开发,怎么实现自动部署?

webpack有个轻量级的nodejs express:Webpack-dev-server,它的访问地址为:http://localhost:8080,web后台采用tomcat服务器端口:http://localhost:8088,请问webpack.config.js如何配置?


  1. 题主到底是想问怎么部署还是问怎么调试?因为webpack-dev-server是用于实时调试用的

  2. webpack-dev-server也可以使用自己的后端进行实时调试,这就需要你后端模版里进行一些处理,然后将webpack构建的output.publicPath指向webpack-dev-server的"http://localhost:8080/assets/"。

官方文档的说明:

Combining with an existing server
You may want to run a backend server or a mock of it in development. You should not use the webpack-dev-server as a backend. Its only purpose is to serve static (webpacked) assets.

You can run two servers side-by-side: The webpack-dev-server and your backend server.

In this case you need to teach the webpack-generated assets to make requests to the webpack-dev-server even when running on a HTML-page sent by the backend server. On the other side you need to teach your backend server to generate HTML pages that include script tags that point to assets on the webpack-dev-server. In addition to that you need a connection between the webpack-dev-server and the webpack-dev-server runtime to trigger reloads on recompilation.

To teach webpack to make requests (for chunk loading or HMR) to the webpack-dev-server you need to provide a full URL in the output.publicPath option.

To make a connection between webpack-dev-server and its runtime best use the inline mode with --inline. The webpack-dev-server CLI automatically includes an entry point which establishes a WebSocket connection. (You can also use the iframe mode if you point --content-base of the webpack-dev-server to your backend server. If you need a websocket connection to your backend server, you’ll have to use iframe mode.

When you use the inline mode just open the backend server URL in your web browsers. (If you use the iframe mode open the /webpack-dev-server/ prefixed URL of the webpack-dev-server.)

Summary and example:

webpack-dev-server on port 8080.
backend server on port 9090.
generate HTML pages with <script src="http://localhost:8080/assets/bundle.js">.
webpack configuration with output.publicPath = "http://localhost:8080/assets/".
when compiling files for production, use --output-public-path /assets/.
inline mode:
--inline.
open http://localhost:9090.
or iframe mode:
webpack-dev-server contentBase = "http://localhost:9090/" (--content-base).
open http://localhost:8080/webpack-dev-server/.
Or use the proxy option…

http://webpack.github.io/docs/webpack-dev-server.html


前端可以用flightplan.js 部署。。超级方便

仔细看了看题主的问题。。你是不是想用webpack-dev-server做反向代理tomcat?。。。
附上我用webpack-dev-server做反向的的代码

var config = require("./webpack.config.js");
var webpack = require("webpack")
var webpackDevServer=require("webpack-dev-server")

config.entry.unshift("webpack-dev-server/client?http://localhost:8080", "webpack/hot/dev-server");
var compiler = webpack(config);




var server = new webpackDevServer(compiler, {
  contentBase: "build",
  hot: true,
  inline: true,
  historyApiFallback: true,
  proxy: {
        '/*': {
            target: 'loaclhost:8088/',
    
            secure: false
        },

    }

});

server.listen(8080);

ps 以上代码不是 写在 webpack.config.js里的。。而是 新建server.js 开发的时候 node server.js

【热门文章】
【热门文章】