Webpack:为开发网站提供静态(本地)文件

Question

对不起，如果我的问题太傻了。 我正在尝试从gulp转移到webpack来生产我们的资产(sass/js/img)。 我小前提：我们用 php 而不是 js 开发网站，我发现的很多文档都不适合我的情况(我也知道这是无稽之谈，仅使用 webpack 作为任务运行器不是最好的方法和他的目的)。

在本教程之后，我已经编译了我的资源并编写了脚本来监视资产的更新。

我的 webpack.config.js (你可以跳过它，只是为了一个广阔的视野)

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
})
]
};

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

我尝试了这种方式(和其他方式，但这似乎接近解决方案)，将 devServer 参数添加到 module.exports

devServer: {
quiet: false,
stats: {colors: true},
proxy: {// proxy URLs to backend development server
'/': {
target: 'http://my.site.it',
secure: false,
"protocol": 'http:',
"port": 80
},
ignorePath: true,
changeOrigin: true,
secure: false
},
overlay: {
warnings: true,
errors: true
},
disableHostCheck: true,
contentBase: path.join(__dirname, '../../../../../../../httpdocs'), // boolean | string | array, static file location        
//port: 3000,
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
open: true,
//useLocalIp: true,
noInfo: false // only errors & warns on hot reload
}

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

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

谢谢

Answer 1

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

当服务器响应多个虚拟主机时，如果您代理内容，则必须将标头传递给您请求的站点。

我添加了这一行

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
},