-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.dev.js
95 lines (94 loc) · 2.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
const path = require('path');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const WriteFilePlugin = require('write-file-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
resources: [
'./src/scss/utils/*.scss',
],
},
},
],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
/**
* Cleans the dist folder before each build
*/
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
new WriteFilePlugin({
test: /^(?!.*(hot)).*/,
}),
],
devServer: {
static: {
directory: path.resolve(__dirname, 'dist'),
},
/**
* @see https://webpack.js.org/configuration/dev-server/#devserverallowedhosts
* Adds an extra layer of security to devServer by only allowing connections from specified hosts.
* This option is ignored if the host option is set to a non-localhost value.
*
*/
allowedHosts: [
'localhost',
],
// Compress devServer files output
compress: false,
// Open devServer in browser each time it starts
open: false,
// Set Access-Control-Allow-Origin header to '*' for allowing cross-origin access during development
// Useful for avoiding CORS issues; do not use this configuration in production
headers: {
'Access-Control-Allow-Origin': '*',
},
liveReload: false,
hot: true,
/**
* When the dev server is started, it will open on this port.
*/
port: 8080,
/**
* The proxy option is used to redirect specific requests from the Webpack dev server
* to another server (in this case, a WordPress server running on http://localhost:8888).
* This is useful when you have a separate back-end server and want to handle API requests
* or serve specific files from that server while still using the Webpack dev server
* for the rest of your application.
*/
proxy: {
'/': {
target: 'http://localhost:8888',
changeOrigin: true,
},
},
/**
* This is saving the files to disk to allow for HMR
* The files are saved to the dist folder
* DO NOT USE IN PRODUCTION
*/
devMiddleware: {
writeToDisk: true,
},
},
});