-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
122 lines (99 loc) · 3.03 KB
/
webpack.config.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
116
117
118
119
120
121
122
// Browser sync stuff
const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' )
const bs = require( 'browser-sync' )
// Webpack and css
const webpack = require( 'webpack' )
// Workflow
const { watch } = require( 'fs' )
const { css } = require( __dirname + '/modules/publish-css' )
// Site config
const site = require( __dirname + '/modules/config' )
// Conversions
const publishpug = require( __dirname + '/modules/publish-pug' )
const publishassets = require( __dirname + '/modules/publish-assets' )
process.on('warning', e => console.warn(e.stack));
// Get environment variables
const dotenv = require( 'dotenv' )
const { NODE_ENV } = process.env
const dev = NODE_ENV == 'development'
// Helpers
const error = e => {
console.log( "\007" ) // Beep
console.error( "\x1b[31m", `\n 🛑 error: `, e && e.message || e, "\x1b[0m" )
}
// ///////////////////////////////
// Plugins
// ///////////////////////////////
let thebs
const servername = 'bsserver'
const bsconfig = {
host: 'localhost',
open: true,
cors: true,
port: 3000,
server: {
baseDir: [ site.system.public ],
serveStaticOptions: {
extensions: ['html']
}
},
notify: false
}
const bsyncplugconfig = {
name: servername,
callback: f => { thebs = bs.get( servername ) }
}
const envPlugin = new webpack.DefinePlugin( {
process: {
env: {
...JSON.stringify( dotenv.config().parsed ),
NODE_ENV: JSON.stringify( process.env.NODE_ENV )
}
}
} )
// ///////////////////////////////
// Watchers for non webpack files
// ///////////////////////////////
// Watch pug/sass
if ( dev ) watch( site.system.source, { recursive: true }, async ( eventType, filename ) => {
// Pug file was updated
if( filename.includes( 'pug' ) ) await publishpug( site, filename ).catch( error )
// Sass file was updated, rebuild sass and pug files
else if ( filename.includes( 'sass' ) || filename.includes( 'scss' ) ) {
if( filename.includes( 'essential-above-the-fold' ) ) await publishpug( site ).catch( error )
await css( site ).catch( error )
}
// Reload browser after every change
thebs.reload()
} )
// Watch asset folder
if ( dev ) watch( `${ site.system.source }/assets`, { recursive: true }, async ( eventType, filename ) => {
// Republish assets
await publishassets( site, filename ).catch( error )
// Reload browser after every change
thebs.reload()
} )
module.exports = async f => {
await Promise.all( [ publishpug( site ), publishassets( site ), css( site ) ] )
return {
entry: site.system.source + 'js/main.js',
mode: NODE_ENV,
output: {
filename: `app-${site.system.timestamp}.js`,
path: `${site.system.public}assets/js/`
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
devtool: NODE_ENV == 'production' ? false : 'inline-source-map',
plugins: NODE_ENV == 'production' ? [ envPlugin ] : [ envPlugin, new BrowserSyncPlugin( bsconfig, bsyncplugconfig ) ]
}
}