在与webpack-dev-server相同的端口上提供任意资产

时间:2016-08-15 15:50:36

标签: webpack webpack-dev-server

使用webpack-dev-server提供任意资产的最佳方法是什么?

我希望能够为webpack-dev-server捆绑的所有资产和来自同一地址的目录中的图像等其他资产提供服务 - 这样做的最佳模式是什么? ?

谢谢!

1 个答案:

答案 0 :(得分:2)

您可以使用CopyWebpackPlugin,它将文件复制到您的构建输出目录,并与webpack-dev-server一起使用:

var CopyWebpackPlugin = require('copy-webpack-plugin');
//...  later in plugins[]
new CopyWebpackPlugin([
    { // copy all contents of 'public' folder over to output directory
        from: 'src/public'
    }
],

如果由于某种原因您不想这样做,您可以使用顶级代码将请求代理到另一个目录的某个路径(以及'条目',' webpack.config.js中的插件等)devServer config:

devServer: {
    port: 5001,
    quiet: false,
    stats: { color: true },
    proxy: {
        "/api/*": {
            target: 'http://localhost:5000',
            secure: false,
            changeOrigin: true,
            ignorePath: false,
        },
    }
},

这是针对我的用例,对端口5001上运行的webpack-dev-server的任何请求,这些请求转到以/ api / get开头的url代理到使用相同路径在端口5000上运行的Web服务器。即如果你打电话给' / api / values'从webpack-dev-server中运行的页面,它将请求代理到' http://localhost:5000/api/values'