promote --env and get default mode

Author: skuadron45

build/utils.js

@@ -1,4 +1,4 @@
-exports.pages = function (env, folder = '') {
+exports.pages = function (mode, folder = '') {
   const rootPagesFolderName = 'pages'
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const fs = require('fs')
@@ -14,13 +14,13 @@ exports.pages = function (env, folder = '') {
     const viewName = view.split('.')[0]
     const fileName = folder === '' ? `${viewName}/index.html` : `${folder}/${viewName}/index.html`
     const options = {
-      minify: !env === 'development',
+      minify: !mode === 'development',
       filename: fileName,
       template: `views/${rootPagesFolderName}/${folder}/${view}`,
       inject: true
     }
 
-    if (env === 'development') {
+    if (mode === 'development') {
       options.minify = {
         removeComments: true,
         collapseWhitespace: true,

build/webpack.config.js

@@ -12,14 +12,17 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 const ASSET_PATH = process.env.ASSET_PATH || '/'
 
-
 // Files
 const utils = require('./utils')
 
 // Configuration
-module.exports = env => {
+module.exports = (env) => {
+
+  // Get default mode from env
+  const MODE = env.mode || 'production';
 
   return {
+    mode: MODE,
     target: 'web',
     context: path.join(__dirname, '../src'),
     entry: {
@@ -62,7 +65,7 @@ module.exports = env => {
         {
           test: /\.css$/,
           use: [
-            env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
+            MODE === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
             {
               loader: 'css-loader',
               options: {
@@ -75,7 +78,7 @@ module.exports = env => {
         {
           test: /\.scss$/,
           use: [
-            env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
+            MODE === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
             { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, // translates CSS into CommonJS
             'postcss-loader',
             'sass-loader', // compiles Sass to CSS
@@ -158,16 +161,17 @@ module.exports = env => {
         Pages
       */
 
-      // Desktop page
+      // Homepage
       new HtmlWebpackPlugin({
-        minify: !env === 'development',
+        minify: !MODE === 'development',
         filename: 'index.html',
         template: 'views/index.pug',
         inject: 'body',
       }),
 
-      ...utils.pages(env), // env, public path, parent folder
-      ...utils.pages(env, 'blog'),
+      // Other pages
+      ...utils.pages(MODE), // mode
+      ...utils.pages(MODE, 'blog'), // mode, folder name under pages
 
       new webpack.ProvidePlugin({
         $: 'jquery',

package.json

@@ -12,10 +12,10 @@
   "license": "MIT",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rimraf dist && webpack --config ./build/webpack.config.js --mode development --progress",
-    "dev-network": "webpack server --config ./build/webpack.config.js --mode=development --progress --open --host 0.0.0.0",
-    "dev": "webpack serve --config ./build/webpack.config.js --mode development --progress",
-    "prod": "rimraf dist && webpack --config ./build/webpack.config.js --mode production --progress "
+    "build": "rimraf dist && webpack --env mode=development --config ./build/webpack.config.js --progress",
+    "dev-network": "webpack serve --env mode=development --config ./build/webpack.config.js --progress --open --host 0.0.0.0 --disable-host-check",
+    "dev": "webpack serve --env mode=development --config ./build/webpack.config.js --progress",
+    "prod": "rimraf dist && webpack --env mode=production --config ./build/webpack.config.js --progress "
   },
   "resolutions": {
     "upath": "1.1.1"