-
Notifications
You must be signed in to change notification settings - Fork 572
/
webpack.dev.ts
112 lines (93 loc) · 3.46 KB
/
webpack.dev.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/**
* @fileoverview This file contains a development configuration for webpack
* meant for webpack-dev-server.
*/
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
import { Configuration } from "webpack"
import "webpack-dev-server"
import { createCommonWebpackConfig } from "./webpack.common"
const commonWebpackConfig = createCommonWebpackConfig()
const commonPlugins = commonWebpackConfig.plugins || []
const commonRules = commonWebpackConfig.module?.rules || []
const config: Configuration = {
...commonWebpackConfig,
// devtool controls how source maps are generated. In development, we want
// more details (less optimized) for more readability and an easier time
// debugging
devtool: "eval-source-map",
// devServer is the configuration for webpack-dev-server.
//
// REMARK: needs webpack-dev-server import at top of file for typings
devServer: {
// allowedHosts are services that can access the running server.
// Setting allowedHosts sets up the development server to spend specific headers to allow cross-origin requests.
// In v1, we use CODERD_HOST for the allowed host and origin in order to mitigate security risks.
// We don't have an equivalent in v2 - but we can allow localhost and cdr.dev,
// so that the site is accessible through dev urls.
// We don't want to use 'all' or '*' and risk a security hole in our dev environments.
allowedHosts: ["localhost", ".cdr.dev"],
// client configures options that are observed in the browser/web-client.
client: {
// automatically sets the browser console to verbose when using HMR
logging: "verbose",
// errors will display as a full-screen overlay
overlay: true,
// build % progress will display in the browser
progress: true,
// webpack-dev-server uses a webSocket to communicate with the browser
// for HMR. By setting this to auto://0.0.0.0/ws, we allow the browser
// to set the protocal, hostname and port automatically for us.
webSocketURL: "auto://0.0.0.0:0/ws",
},
devMiddleware: {
publicPath: "/",
},
headers: {
"Access-Control-Allow-Origin": "*",
},
// historyApiFallback is required when using history (react-router) for
// properly serving index.html on 404s.
historyApiFallback: true,
hot: true,
port: process.env.PORT || 8080,
proxy: {
"/api": {
target: "https://dev.coder.com",
ws: true,
secure: false,
},
},
static: ["./static"],
},
// Development mode - see:
// https://webpack.js.org/configuration/mode/#mode-development
mode: "development",
module: {
rules: [
...commonRules,
{
test: /\.css$/i,
// Use simple style-loader for CSS modules. This places styles directly
// in <style> tags which is great for development, but poor for loading
// in production
use: ["style-loader", "css-loader"],
},
],
},
output: {
...commonWebpackConfig.output,
// The chunk name will be used as-is for the bundle output
// This is simpler than production, to improve performance
// (no need to calculate hashes in development)
filename: "[name].js",
},
plugins: [
...commonPlugins,
// The ReactRefreshWebpackPlugin enables hot-module reloading:
// https://github.com/pmmmwh/react-refresh-webpack-plugin
new ReactRefreshWebpackPlugin({
overlay: true,
}),
],
}
export default config