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

Question

使用 webpack-dev-server 提供任意资源的最佳方式是什么？

我希望能够服务我的所有 Assets ，即由 webpack-dev-server 捆绑的 Assets 以及其他 Assets (例如来自同一地址的目录中的图像) - 最佳模式是什么为了这样做？

谢谢!

Answer 1

您可以使用 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 中的“entry”、“plugins”等)将请求代理到另一个目录的某个路径)开发服务器配置:

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/开头的 URL，都会被代理到在端口 5000 上运行且具有相同路径的 Web 服务器。 IE。如果您从 webpack-dev-server 中运行的页面调用“/api/values”，它会将请求代理到“http://localhost:5000/api/values” '