Question

抱歉，如果我的问题太傻了。我正试图从gulp转移到webpack来生产我们的资产（sass / js / img）。我的前提是：我们在php中开发网站，而不是在js中开发网站，我发现的文档大部分都不适用于我的情况（我也知道这是一个废话，只使用webpack作为任务运行器不是最好的方式和他的目的）

以下教程我已经编译了资源并编写了脚本以观察资产的更新。

我的webpack.config.js（您可以跳过它，仅用于广阔的视野）

translatable

现在我希望将我的编译资产（js / css）服务和浏览器同步到网络上托管的开发网站，以加快脚本和样式的开发。

我尝试过这种方式（以及其他方式，但这似乎与解决方案接近），将devServer param添加到module.exports

module.exports = {
entry: ["./assets/scripts/script.js", "./assets/styles/styles.scss"],
output: {
    filename: "scripts/scripts.min.js",
    path: path.join(__dirname, "./dist/")
},
module: {
    rules: [
        {
            test: /\.(otf|eot|ttf|woff|svg|png|jpe?g)/i,
            exclude: /(node_modules|bower_components)/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        name: "./assets/images/[name].[ext]",
                        limit: 10000
                    }
                },
                {
                    loader: "img-loader"
                }
            ]
        },
        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                use: [
                    {
                        loader: "css-loader",
                        options: {minimize: true}
                    },
                    {loader: "postcss-loader"},
                    {loader: "sass-loader"}
                ]
            })
        },
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["env"]
                }
            }
        }
    ]
},
plugins: [
    new ExtractTextPlugin({
        filename: "styles/styles.min.css"
    }),
    new UglifyJsPlugin({
        sourceMap: true
    })
]
};

我想我错过了一些配置因为我有一个奇怪的行为。我在我的http://localhost上提供了在线网站，但似乎他无法解析虚拟主机，因为我通过在网址中插入服务器IP地址而不是正确的网站来获取您获得的虚拟页面由my.site.it调用

我知道这是一个非常单一的问题，但我希望有人知道这个问题

由于

Answer 1

我根据服务器助手找到了解决方案

当服务器响应多个vhost时，如果您代理内容，则必须向您请求的站点传递标题。

我添加了这一行

proxy: {// proxy URLs to backend development server
    '/': {
        target: 'http://my.site.it',
        secure: false,
        "protocol": 'http:',
        "port": 80,
         headers: {
                "Host": "my.site.it"
         }
    },
    ignorePath: true,
    changeOrigin: true,
    secure: false
},

Webpack：为dev网站提供静态（本地）文件

1 个答案: