diff --git a/package.json b/package.json index 36ec9ccb..88d63a78 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "start": "NODE_ENV=production node server.js", "build:dev": "rimraf ./build && NODE_ENV=development webpack", + "build:extract": "rimraf ./build && NODE_ENV=extract webpack", "clean": "rimraf ./build ./dist", "start:dev": "NODE_ENV=development node server.dev.js", "lint": "eslint ./", diff --git a/webpack.config.js b/webpack.config.js index 7478ab8b..216b27f1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,6 +14,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); require('dotenv').load({ silent: true }); +const EXTRACT = process.env.NODE_ENV === 'extract'; const PRODUCTION = process.env.NODE_ENV === 'production'; const PATHS = { @@ -61,13 +62,6 @@ const PLUGINS = [ }, ]), - // Extract stylesheets out of bundle - new ExtractTextPlugin( - PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', { - allChunks: true - } - ), - // Generate index.html for app with link and style tags addded new HtmlWebpackPlugin({ filename: 'index.html', @@ -97,6 +91,15 @@ const PROD_PLUGINS = [ }), ]; +if (PRODUCTION || EXTRACT) { + // Extract stylesheets out of bundle + PLUGINS.push( + new ExtractTextPlugin(PRODUCTION ? 'css/styles.min.css' : 'css/styles.css', { + allChunks: true + }) + ); +} + if (PRODUCTION) { PLUGINS.push(...PROD_PLUGINS); } @@ -161,7 +164,8 @@ const LOADERS = [ { test: /\.s[ac]ss$/, exclude: [PATHS.NODE_MODULES], - loader: ExtractTextPlugin.extract('style', SASS_LOADER), + loader: PRODUCTION || EXTRACT ? ExtractTextPlugin.extract('style', SASS_LOADER) + : `style!${SASS_LOADER}`, }, // Dependencies @@ -187,7 +191,10 @@ const LOADERS = [ /** EXPORTED WEBPACK CONFIG **/ const config = { - entry: ['bootstrap-loader/extractStyles', PATHS.APP], + entry: [ + PRODUCTION || EXTRACT ? 'bootstrap-loader/extractStyles' : 'bootstrap-loader', + PATHS.APP + ], output: { filename: PRODUCTION ? 'js/bundle.min.js' : 'js/bundle.js',