cinny/webpack.dev.js
Stefano Pigozzi 1413052d82
Configure webpack to allow proxied GitHub Codespaces connections
By default, webpack's development websocket rejects all incoming connections having an unexpected `Host` or `Origin` header:
https://webpack.js.org/configuration/dev-server/#devserverallowedhosts

This configuration sets `devServer.allowedHosts` to `[".preview.app.github.dev"]` if a GitHub Codespaces environment is detected.

Additionally, to handle how GitHub Codespaces forwards ports, webpack's configuration is changed to obtain the full websocket URL from the client script, instead of only the hostname:
https://webpack.js.org/configuration/dev-server/#websocketurl
2022-11-19 01:05:20 +00:00

32 lines
669 B
JavaScript

const path = require('path');
const common = require('./webpack.common');
const { merge } = require('webpack-merge');
module.exports = merge(common, {
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
publicPath: '/',
},
devServer: {
historyApiFallback: true,
client: {
webSocketURL: "auto://0.0.0.0:0/ws"
},
allowedHosts: process.env.CODESPACES ? [".preview.app.github.dev"] : "auto"
},
module: {
rules: [
{
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
});