/
webpack.dev.js
115 lines (86 loc) · 3.69 KB
/
webpack.dev.js
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
113
114
115
// webpack.dev.js
// ============================================================================
// Imports
// ============================================================================
import webpack from "webpack";
import paths from "./webpack.paths.js"
import HtmlWebpackPlugin from "html-webpack-plugin"
// ============================================================================
// Constants
// ============================================================================
// Config | Development
export const configDevelopment = {
// Configuration | Mode
// ========================================================================
// Set the mode to development or production
mode: "development",
// Development Server Configuration
// ========================================================================
// Spin up a server for quick development
devServer: {
historyApiFallback: true, // Fallback to index.html for Single Page Applications
watchFiles: [ // Watch for changes in these directories
paths.src + "/*",
paths.public + "/*",
],
port: 4040,
open: true, // Open the browser after server has been started
compress: true, // Enable gzip compression
hot: true, // Enable Hot Module Replacement (HMR)
static: {
directory: paths.public // Serve files from this directory
// directory: paths.public + "/"
},
},
// Configuration | Module Rules
// ========================================================================
// Module rules for handling different file types.
// Determine how modules within the project are treated.
// module: {
// rules: [
// {
// test: /\.(scss|css)$/,
// use: [
// // Injects styles into the DOM for hot reloading
// "style-loader",
// ]
// },
// ],
// },
// Plugins
// ========================================================================
plugins: [
// Enable hot reloading
// Only update what has changed on hot reload
new webpack.HotModuleReplacementPlugin(),
// Serve test page
new HtmlWebpackPlugin({
template: "./test/index.html",
// template: paths.src + "/index.html", // Specify the HTML template to use
// title: "Development Mode", // Optional: Specify a title for the HTML document
// favicon: paths.public + "/favicon.ico" // Optional: Specify a favicon
}),
],
// Configuration | Performance
// ========================================================================
// Performance settings to control webpack"s hints
// For development, you generally want to minimize build time and
// maximize speed. Performance hints are usually not as critical in
// development and can be turned off to reduce noise.
performance: {
hints: false
},
// Configuration | Devtool
// ========================================================================
// Control how source maps are generated.
// For development, you want source maps that offer a good balance between
// rebuild speed and quality. The eval-source-map is often recommended for
// development:
// Enable high-quality source maps for better debugging experience.
devtool: "eval-source-map",
// devtool: "inline-source-map",
};
// ============================================================================
// Exports
// ============================================================================
export default configDevelopment