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

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

@@ -166,29 +166,29 @@ npm run build
 
 5.  Automatic browser reload using [BrowserSync](https://browsersync.io/)
 
-    -   The setup assumes that you have a web server installed.
-    -   If you wish to use a proxy in browsersync you can do it using the `--url` CLI argument like this:
+    -   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
     ```
 
 6.  Images optimization using [Optisize](https://github.com/three11/optisize)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "webpack-mpa-ts",
-	"version": "3.10.0",
+	"version": "3.11.0",
 	"description": "Multi page app setup with webpack",
 	"scripts": {
 		"build": "webpack --mode=production",
@@ -32,7 +32,7 @@
 		"itscss": "2.0.1"
 	},
 	"devDependencies": {
-		"@three11/optisize": "1.3.0",
+		"@three11/optisize": "2.0.0",
 		"@types/node": "16.11.11",
 		"@typescript-eslint/eslint-plugin": "5.5.0",
 		"@typescript-eslint/parser": "5.5.0",
@@ -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,39 +5,15 @@ const { parse } = require('url');
 const { resolve } = require('path');
 const { readdirSync } = require('fs');
 
-const { argv } = require('yargs');
-const webpack = require('webpack');
 const magicImporter = require('node-sass-magic-importer');
+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 cssnano = require('cssnano');
-const postcssURL = require('postcss-url');
-const autoprefixer = require('autoprefixer');
-const postcssUtilities = require('postcss-utilities');
-const postcssEasyImport = require('postcss-easy-import');
-const postcssMergeRules = require('postcss-merge-rules');
-const postcssWatchFolder = require('postcss-watch-folder');
-const postcssFlexbugsFixed = require('postcss-flexbugs-fixes');
-
-const { url, server, mode } = argv;
-const sourceMap = {
-	sourceMap: mode === 'development'
-};
-
-if (server) {
-	exec('php index.php > index.html');
-}
-
-const postcssOptions = {
-	plugins: [postcssURL({ url: 'rebase' }), autoprefixer(), postcssUtilities, postcssEasyImport, postcssFlexbugsFixed],
-	...sourceMap
-};
-
-const browserSyncConfig = {
+const browserSyncConfig = server => ({
 	host: 'localhost',
 	port: 3000,
 	open: 'external',
@@ -74,7 +50,7 @@ const browserSyncConfig = {
 		}
 	},
 	proxy: 'localhost'
-};
+});
 
 const extractTextConfig = {
 	filename: 'app.css'
@@ -108,25 +84,49 @@ 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: mode === 'development'
+	};
+
+	const postcssOptions = {
+		plugins: [
+			require('postcss-easy-import'),
+			require('postcss-url')({
+				url: 'rebase'
+			}),
+			require('postcss-utilities'),
+			require('postcss-flexbugs-fixes'),
+			require('autoprefixer')()
+		],
+		...sourceMap
+	};
+
 	if (isProduction) {
-		postcssOptions.plugins.push(postcssMergeRules, cssnano());
+		postcssOptions.plugins.push(require('postcss-merge-rules'), require('cssnano')());
 	}
 
 	if (isDevelopment) {
 		postcssOptions.plugins.push(
-			postcssWatchFolder({
+			require('postcss-watch-folder')({
 				folder: './assets/styles',
 				main: './assets/styles/main.scss'
 			})
 		);
 	}
 
 	const config = {
-		mode: mode,
+		mode,
 		entry: ['./assets/styles/main.scss', './assets/scripts/main.ts'],
 		output: {
 			path: resolve(__dirname, './assets/dist'),
@@ -178,7 +178,7 @@ module.exports = () => {
 			]
 		},
 		plugins: [
-			new webpack.ProvidePlugin({
+			new ProvidePlugin({
 				$: 'jquery',
 				jQuery: 'jquery',
 				'window.jQuery': 'jquery'
@@ -201,21 +201,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
 			})
 		);