Fix usage of "url" and "server" CLI arguments (#698)

Author: scriptex

.github/workflows/build.yml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: Build
 
 on:
@@ -13,16 +10,12 @@ jobs:
     build:
         runs-on: ubuntu-latest
 
-        strategy:
-            matrix:
-                node-version: [12.x, 14.x, 16.x]
-
         steps:
             - uses: actions/checkout@v2
-            - name: Use Node.js ${{ matrix.node-version }}
+            - name: Use Node.js LTS
               uses: actions/setup-node@v2
               with:
-                  node-version: ${{ matrix.node-version }}
+                  node-version: lts/*
             - run: yarn
             - run: yarn lint
             - run: yarn pwa

README.md

@@ -169,29 +169,29 @@ npm run build
 
 4.  Automatic browser reload using [BrowserSync](https://browsersync.io/)
 
-    -   The setup assumes that you have a web server installed.
+    -   The setup assumes that you have a web server (MAMP, XAMPP, etc) installed.
     -   If you wish to use a proxy in browsersync you can do it using the `url` CLI argument like this:
 
     ```sh
-    yarn start --url=http://your.app
+    yarn start --env url=http://your.app
     ```
 
     or
 
     ```sh
-    npm start -- --url=http://your.app
+    npm start --env url=http://your.app
     ```
 
-    If you do not have a web server installed, then the files can be served via the browser-sync built-in server. In order to use this you need to pass a new CLI argument `--server` like this.
+    If you do not have a web server installed, then the files can be served via the browser-sync built-in server. In order to use this you need to pass a new CLI argument `server` like this.
 
     ```sh
-    yarn start --server
+    yarn start --env server
     ```
 
     or
 
     ```sh
-    npm start -- --server
+    npm start --env server
     ```
 
 5.  Images optimization using [Optisize](https://github.com/three11/optisize)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "webpack-mpa-next",
-	"version": "3.10.0",
+	"version": "3.11.0",
 	"description": "Multi page app setup with webpack",
 	"scripts": {
 		"build": "webpack --mode=production",
@@ -34,7 +34,7 @@
 	"devDependencies": {
 		"@babel/core": "7.16.0",
 		"@babel/preset-env": "7.16.4",
-		"@three11/optisize": "1.3.0",
+		"@three11/optisize": "2.0.0",
 		"autoprefixer": "10.4.0",
 		"babel-loader": "8.2.3",
 		"browser-sync": "2.27.7",
@@ -76,8 +76,7 @@
 		"webpack": "5.64.4",
 		"webpack-cli": "4.9.1",
 		"webpack-shell-plugin-next": "2.2.2",
-		"webpack-spritesmith": "1.1.0",
-		"yargs": "17.3.0"
+		"webpack-spritesmith": "1.1.0"
 	},
 	"browserslist": [
 		"> 1%",

webpack.config.js

@@ -5,50 +5,13 @@ const { parse } = require('url');
 const { resolve } = require('path');
 const { readdirSync } = require('fs');
 
-const { argv } = require('yargs');
 const { ProvidePlugin } = require('webpack');
 const SpritesmithPlugin = require('webpack-spritesmith');
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const WebpackShellPlugin = require('webpack-shell-plugin-next');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const { url, server, mode } = argv;
-const sourceMap = {
-	sourceMap: mode === 'development'
-};
-
-if (server) {
-	exec('php index.php > index.html');
-}
-
-const postcssOptions = {
-	ident: 'postcss',
-	plugins: [
-		require('autoprefixer'),
-		require('postcss-mixins'),
-		require('postcss-easy-import'),
-		require('postcss-url')({
-			url: 'rebase'
-		}),
-		require('postcss-normalize')({
-			forceImport: true
-		}),
-		require('postcss-color-mod-function'),
-		require('postcss-each-variables'),
-		require('postcss-each'),
-		require('postcss-for'),
-		require('postcss-nested'),
-		require('postcss-extend'),
-		require('postcss-utilities'),
-		require('postcss-flexbugs-fixes'),
-		require('postcss-merge-rules'),
-		require('postcss-calc'),
-		require('postcss-custom-media')
-	],
-	...sourceMap
-};
-
 const babelConfig = [
 	{
 		loader: 'babel-loader',
@@ -60,7 +23,7 @@ const babelConfig = [
 	}
 ];
 
-const browserSyncConfig = {
+const browserSyncConfig = server => ({
 	host: 'localhost',
 	port: 3000,
 	open: 'external',
@@ -97,7 +60,7 @@ const browserSyncConfig = {
 		}
 	},
 	proxy: 'localhost'
-};
+});
 
 const extractTextConfig = {
 	filename: 'app.css'
@@ -130,10 +93,48 @@ if (svgs.length) {
 	shellScripts.push('spritesh -q -i assets/images/svg -o ./assets/dist/sprite.svg -p svg-');
 }
 
-module.exports = () => {
+module.exports = (env, argv) => {
+	const { url, server } = env;
+	const { mode } = argv;
+
 	const isDevelopment = mode === 'development';
 	const isProduction = mode === 'production';
 
+	if (server) {
+		exec('php index.php > index.html');
+	}
+
+	const sourceMap = {
+		sourceMap: isDevelopment
+	};
+
+	const postcssOptions = {
+		ident: 'postcss',
+		plugins: [
+			require('autoprefixer'),
+			require('postcss-mixins'),
+			require('postcss-easy-import'),
+			require('postcss-url')({
+				url: 'rebase'
+			}),
+			require('postcss-normalize')({
+				forceImport: true
+			}),
+			require('postcss-color-mod-function'),
+			require('postcss-each-variables'),
+			require('postcss-each'),
+			require('postcss-for'),
+			require('postcss-nested'),
+			require('postcss-extend'),
+			require('postcss-utilities'),
+			require('postcss-flexbugs-fixes'),
+			require('postcss-merge-rules'),
+			require('postcss-calc'),
+			require('postcss-custom-media')
+		],
+		...sourceMap
+	};
+
 	if (isProduction) {
 		postcssOptions.plugins.push(require('postcss-merge-rules'), require('cssnano')());
 	}
@@ -148,7 +149,7 @@ module.exports = () => {
 	}
 
 	const config = {
-		mode: mode,
+		mode,
 		entry: ['./assets/styles/main.css', './assets/scripts/main.js'],
 		output: {
 			path: resolve(__dirname, './assets/dist'),
@@ -210,21 +211,23 @@ module.exports = () => {
 		stats: 'errors-only'
 	};
 
+	const bsConfig = browserSyncConfig(server);
+
 	if (isDevelopment) {
 		if (url) {
-			browserSyncConfig.host = parse(url).hostname;
-			browserSyncConfig.proxy = url;
+			bsConfig.host = parse(url).hostname;
+			bsConfig.proxy = url;
 		}
 
 		if (server) {
-			delete browserSyncConfig.host;
-			delete browserSyncConfig.proxy;
+			delete bsConfig.host;
+			delete bsConfig.proxy;
 
-			browserSyncConfig.server = true;
+			bsConfig.server = true;
 		}
 
 		config.plugins.push(
-			new BrowserSyncPlugin(browserSyncConfig, {
+			new BrowserSyncPlugin(bsConfig, {
 				reload: false
 			})
 		);