鍍金池/ 問答/Linux  HTML/ webpack-dev-server 配置proxy轉(zhuǎn)發(fā)請求無效,麻煩大牛幫忙看

webpack-dev-server 配置proxy轉(zhuǎn)發(fā)請求無效,麻煩大牛幫忙看下?

項目最近打包速度越來越慢,針對webpack進(jìn)行了一些配置的優(yōu)化,之前是用nginx + webpack -w來開發(fā)。但發(fā)現(xiàn)經(jīng)過DllPlugin、happypack等配置webpack-dev-server的編譯速度遠(yuǎn)遠(yuǎn)超過build速度。但是,也在最后一步卡主了,webpack-dev-server配置了proxy轉(zhuǎn)發(fā)請求,但是無效。配置如下,麻煩哪位大牛幫我看一下,不勝感激~~
webpack.config.js

var path = require('path');
var webpack = require('webpack');

var ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
var HappyPack = require("happypack");
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, './app/dci.js');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');


var config = {
    context: path.resolve(__dirname), // to automatically find tsconfig.json
    devtool: false,
    entry: [
        'react-hot-loader/patch',
        APP_PATH,
    ],
    output: {
        path: BUILD_PATH,
        filename: "dci.js",
        publicPath: "/",
        chunkFilename: 'js/[id].[chunkhash].js',
    },
    
    //...
};

module.exports = config;

weback.dev.config.js


var config = require('./webpack.config.js');
var webpack = require('webpack');
var path = require('path');
var ROOT_PATH = path.resolve(__dirname);
var BULID_PATH = path.resolve(ROOT_PATH, '/dist/');
var HtmlWebpackPlugin = require('html-webpack-plugin');

config.devServer = {
    port: 8018,
    publicPath: "http://localhost/dist/", //我猜測可能是這里的問題,但是不知道怎么修改
    host: '0.0.0.0',
    hot: true,
    inline: true,
    // contentBase: BULID_PATH,//告訴服務(wù)器從哪里提供內(nèi)容
    historyApiFallback: true,
    compress: true,
    disableHostCheck: true,

    proxy: {
        '/api': {
            target: 'http://192.168.200.55:8080', //這里并沒有生效,依然是在8018端口發(fā)送的請求
            secure: false,
            changeOrigin: true
        }
    }

};

config.devtool = 'eval';
config.plugins.push(new webpack.DefinePlugin({
    process: {
        env: {
            NODE_ENV: JSON.stringify('development')
        },
        noDeprecation: true
    }
}));

config.plugins.push(
    new webpack.NamedModulesPlugin()
);

config.plugins.push(
    new webpack.HotModuleReplacementPlugin()
);

config.plugins.push(

    new HtmlWebpackPlugin({
        title: 'Hot Module Replacement',
        template: path.join(__dirname, '/dist/dci.html')
    })

);

module.exports = config;

clipboard.png

求指點(diǎn)迷津

回答
編輯回答
乖乖瀦

你在瀏覽器上看到的肯定是8018端口的,不然你設(shè)置代理來意義何在

2017年4月26日 14:26
編輯回答
眼雜

昨天從github與Stack Overflow上試了很多的配置還是不過,只好回頭仔細(xì)研究webpack-dev-server文檔幾項描述。找到問題所在,下面貼出來:
webpack.config.js

//...剩余其它代碼
var BULID_PATH = path.resolve(ROOT_PATH, 'dist/'); 
config.devServer = {
    port: 8018,
    publicPath: "/", //這里也是2樓YoungYou指出來的問題,publicPath是存放編譯后文件的位置,按照官方        
                     //的描述,可以用完整的文件路徑,或者文件夾名稱,我加了```dist/```,所以請求的格    
                     //式是'/dist/api/**',導(dǎo)致請求轉(zhuǎn)發(fā)失敗
    host: '0.0.0.0',
    hot: true,
    inline: true,
    contentBase: BULID_PATH,//另外一點(diǎn)在于這里
                            //告訴服務(wù)器從哪里提供內(nèi)容, 包括圖片、```lib.js```、 ```*.html```等
    historyApiFallback: true,
    compress: true,
    disableHostCheck: true,

    proxy: {
        '/api/**': {
            target: 'http://192.168.200.55:8080/',
            changeOrigin: true
        },

    }
};

proxy.publicPath


@YoungYou

2017年4月18日 15:03
編輯回答
初念

看你訪問的是 /dist/api,把配置里也改成這樣試試,不知道你為什么要加/dist

2017年2月27日 14:16