@@ -18,6 +18,9 @@ const isDebug = !process.argv.includes('--release');
1818const isVerbose = process . argv . includes ( '--verbose' ) ;
1919const isAnalyze = process . argv . includes ( '--analyze' ) || process . argv . includes ( '--analyse' ) ;
2020
21+ const stylesRegExp = / \. ( c s s | l e s s | s c s s | s s s ) $ / ;
22+ const staticAssetName = isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]' ;
23+
2124//
2225// Common configuration chunk to be used for both
2326// client-side (client.js) and server-side (server.js) bundles
@@ -42,14 +45,17 @@ const config = {
4245 } ,
4346
4447 module : {
48+ // Make missing exports an error instead of warning
49+ strictExportPresence : true ,
50+
4551 rules : [
4652 {
4753 test : / \. j s x ? $ / ,
4854 loader : 'babel-loader' ,
4955 include : [
5056 path . resolve ( __dirname , '../src' ) ,
5157 ] ,
52- query : {
58+ options : {
5359 // https://github.com/babel/babel-loader#options
5460 cacheDirectory : isDebug ,
5561
@@ -87,8 +93,14 @@ const config = {
8793 ] ,
8894 } ,
8995 } ,
96+
97+ // Handle internal/project styles (from src folder)
9098 {
91- test : / \. c s s / ,
99+ // Internal Styles
100+ test : stylesRegExp ,
101+ include : [
102+ path . resolve ( __dirname , '../src' ) ,
103+ ] ,
92104 use : [
93105 {
94106 loader : 'isomorphic-style-loader' ,
@@ -109,6 +121,8 @@ const config = {
109121 } ,
110122 ] ,
111123 } ,
124+
125+ // Handle external/third-party styles (from node_modules)
112126 {
113127 test : / t h e m e .s c s s $ / ,
114128 loaders : [
@@ -118,7 +132,7 @@ const config = {
118132 ] ,
119133 } ,
120134 {
121- test : / \. s c s s $ / ,
135+ test : stylesRegExp ,
122136 exclude : [ / t h e m e .s c s s $ / ] ,
123137 use : [
124138 'isomorphic-style-loader' ,
@@ -128,26 +142,62 @@ const config = {
128142 ] ,
129143 } ,
130144 {
131- test : / \. m d $ / ,
132- loader : path . resolve ( __dirname , './lib/markdown-loader.js' ) ,
145+ test : / \. ( b m p | g i f | j p e ? g | p n g ) $ / ,
146+ issuer : stylesRegExp ,
147+ loader : 'url-loader' ,
148+ options : {
149+ name : staticAssetName ,
150+ limit : 4096 , // 4kb
151+ } ,
133152 } ,
153+
154+ // Inline small SVGs into CSS as UTF-8 encoded DataUrl string
134155 {
135- test : / \. t x t $ / ,
136- loader : 'raw-loader' ,
156+ test : / \. s v g $ / ,
157+ issuer : stylesRegExp ,
158+ loader : 'svg-url-loader' ,
159+ options : {
160+ name : staticAssetName ,
161+ limit : 4096 , // 4kb
162+ } ,
137163 } ,
164+
165+ // Return public URL to large images otherwise
138166 {
139- test : / \. ( i c o | j p g | j p e g | p n g | g i f | e o t | o t f | w e b p | s v g | t t f | w o f f | w o f f 2 ) ( \? .* ) ? $ / ,
167+ test : / \. ( b m p | g i f | j p e ? g | p n g | s v g ) $ / ,
168+ issuer : { not : [ stylesRegExp ] } ,
140169 loader : 'file-loader' ,
141- query : {
142- name : isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]' ,
170+ options : {
171+ name : staticAssetName ,
143172 } ,
144173 } ,
174+
175+ // Convert plain text into module
145176 {
146- test : / \. ( m p 4 | w e b m | w a v | m p 3 | m 4 a | a a c | o g a ) ( \? .* ) ? $ / ,
147- loader : 'url-loader' ,
148- query : {
149- name : isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]' ,
150- limit : 10000 ,
177+ test : / \. t x t $ / ,
178+ loader : 'raw-loader' ,
179+ } ,
180+
181+ // Convert markdown into html
182+ {
183+ test : / \. m d $ / ,
184+ loader : path . resolve ( __dirname , './lib/markdown-loader.js' ) ,
185+ } ,
186+
187+ // Return public URL for all assets unless explicitly excluded
188+ // DO NOT FORGET to update `exclude` list when you adding a new loader
189+ {
190+ exclude : [
191+ / \. j s x ? $ / ,
192+ / \. j s o n $ / ,
193+ stylesRegExp ,
194+ / \. ( b m p | g i f | j p e ? g | p n g | s v g ) $ / ,
195+ / \. t x t $ / ,
196+ / \. m d $ / ,
197+ ] ,
198+ loader : 'file-loader' ,
199+ options : {
200+ name : staticAssetName ,
151201 } ,
152202 } ,
153203
@@ -166,16 +216,19 @@ const config = {
166216
167217 cache : isDebug ,
168218
219+ // Specify what bundle information gets displayed
220+ // https://webpack.js.org/configuration/stats/
169221 stats : {
222+ cached : isVerbose ,
223+ cachedAssets : isVerbose ,
224+ chunks : isVerbose ,
225+ chunkModules : isVerbose ,
170226 colors : true ,
171- reasons : isDebug ,
172227 hash : isVerbose ,
173- version : isVerbose ,
228+ modules : isVerbose ,
229+ reasons : isDebug ,
174230 timings : true ,
175- chunks : isVerbose ,
176- chunkModules : isVerbose ,
177- cached : isVerbose ,
178- cachedAssets : isVerbose ,
231+ version : isVerbose ,
179232 } ,
180233
181234 // Choose a developer tool to enhance debugging
@@ -222,6 +275,10 @@ const clientConfig = {
222275 } ) ,
223276
224277 ...isDebug ? [ ] : [
278+ // Decrease script evaluation time
279+ // https://github.com/webpack/webpack/blob/master/examples/scope-hoisting/README.md
280+ new webpack . optimize . ModuleConcatenationPlugin ( ) ,
281+
225282 // Minimize all JavaScript output of chunks
226283 // https://github.com/mishoo/UglifyJS2#compressor-options
227284 new webpack . optimize . UglifyJsPlugin ( {
@@ -280,6 +337,12 @@ const serverConfig = {
280337 libraryTarget : 'commonjs2' ,
281338 } ,
282339
340+ // Webpack mutates resolve object, so clone it to avoid issues
341+ // https://github.com/webpack/webpack/issues/4817
342+ resolve : {
343+ ...config . resolve ,
344+ } ,
345+
283346 module : {
284347 ...config . module ,
285348
@@ -288,9 +351,9 @@ const serverConfig = {
288351 if ( rule . loader === 'babel-loader' ) {
289352 return {
290353 ...rule ,
291- query : {
292- ...rule . query ,
293- presets : rule . query . presets . map ( preset => ( preset [ 0 ] !== 'env' ? preset : [ 'env' , {
354+ options : {
355+ ...rule . options ,
356+ presets : rule . options . presets . map ( preset => ( preset [ 0 ] !== 'env' ? preset : [ 'env' , {
294357 targets : {
295358 node : pkg . engines . node . match ( / ( \d + \. ? ) + / ) [ 0 ] ,
296359 } ,
@@ -302,12 +365,12 @@ const serverConfig = {
302365 } ;
303366 }
304367
305- if ( rule . loader === 'file-loader' || rule . loader === 'url-loader' ) {
368+ if ( rule . loader === 'file-loader' || rule . loader === 'url-loader' || rule . loader === 'svg-url-loader' ) {
306369 return {
307370 ...rule ,
308- query : {
309- ...rule . query ,
310- name : `public/assets/${ rule . query . name } ,
371+ options : {
372+ ...rule . options ,
373+ name : `public/assets/${ rule . options . name } ,
311374 publicPath : url => url . replace ( / ^ p u b l i c / , '' ) ,
312375 } ,
313376 } ;
@@ -321,7 +384,7 @@ const serverConfig = {
321384 './assets.json' ,
322385 nodeExternals ( {
323386 whitelist : [
324- / \. ( c s s | l e s s | s c s s | s s s ) $ / i ,
387+ stylesRegExp ,
325388 ] ,
326389 } ) ,
327390 ] ,
0 commit comments