带有后端配置的 webpack-dev-server

Posted 2023-02-19

【中文标题】带有后端配置的 webpack-dev-server

【英文标题】：webpack-dev-server with backend configuration

【发布时间】：2016-07-18 02:38:44

【问题描述】：

我在 localhost:8081 上将 webpack-dev-server 用于 angularjs 应用程序 我也在端口 8080 上使用 tomcat 服务器。 我有下一个结构

project/
project/src/main/sources/
project/src/main/sources/css
project/src/main/sources/js
project/src/main/sources/img
project/src/main/sources/styles
project/src/main/sources/views
project/src/main/sources/index.html
project/src/main/sources/js

webapp/
webapp/build/
webapp/build/js/bundle.js
webapp/build/js/bundle.js.map
webapp/build/js/jquery.min.js

我有下一个 index.html：

....

<link rel="stylesheet" href="/css/styles.css" type="text/css"/>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bundle.js"></script>

....

我有下一个 webpack condig

var webpack = require("webpack");

module.exports = 
    context: __dirname + "\\src\\main\\sources",
    entry: ["./index.js",
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8081'],
    output: 
        path: __dirname + "\\src\\main\\webapp\\build\\js\\",
        filename: "bundle.js",
        publicPath: "\\js\\"
    ,
    module: 
        loaders: [
            
                test: /\.css$/,
                loader: 'style!css'
            ,
            test: /\.js$/, loader: "babel", query:  presets: ['es2015'] ,
            test: /\.html$/, loader: "raw"
        ]
    ,
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: 
        contentBase: __dirname + "\\src\\main\\sources",
        publicPath: '/js/',
        port: 8081,
        historyApiFallback: true,
        proxy: 
            '/somePath' : 'http://localhost:8080/'
        
    
;

所以当我打开http://localhost:8081/webpack-dev-server/js/bundle 时，我看到“HOT”包。 使用这个配置：css 样式，img 不是从 localhost:8081 获取的，但它与 webpack 相关，我也需要重新编译。如何更改配置？

我对服务器端也有很多不同的请求，例如：

"localhost:8081/someRequest1/some", 
"localhost:8081/someRequest2/some", 
......
"localhost:8081/someRequest1/some"

我不能在代理设置中编写每个请求，在配置中使用女巫设置它会起作用吗？ 我试过了

proxy: 
            '*' : 'http://localhost:8080/',
            '/js/*': '/'
        

找不到此配置的 js/bundle。 我也试过了

proxy: 
            '*' : 'http://localhost:8080/',
            '/js/*': '/'
        

和

proxy: 
            '*' : 'http://localhost:8080/',
            '/js/*': 'http://localhost:8081/'
        

js/bundle 也不行。

更新 1。 可能我需要代理除 /js/ 之外的所有请求。我该怎么做？

【参考方案1】：

你只需要一个模式，即：

proxy: 
        '/api/v1/*' : 'http://localhost:8080/',
    

或者干脆

proxy: 
        '/api/*' : 'http://localhost:8080/',
    

这需要您更新您的 api 以遵循此行为。

【讨论】：

"localhost:8081/someRequest1/some" 与 "/api/*" 不一样 因为我有很多来自 root 的请求，例如 "/someRequest101/some" 我不能全部写入代理配置。