Feature/webpack dev server

package.json

@@ -27,7 +27,6 @@
     ]
   },
   "bundleDependencies": false,
-  "dependencies": {},
   "devDependencies": {
     "lerna": "^4.0.0"
   },

packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap

@@ -1,7 +1,202 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`webpack.config.js adds devServer config when passing the --dev-server flag 1`] = `
+Object {
+  "devServer": Object {
+    "compress": true,
+    "contentBase": "/config/webpack/public",
+    "port": 3000,
+  },
+  "devtool": "source-map",
+  "entry": Object {
+    "main": Object {
+      "filename": "index.js",
+      "import": "./src/index.js",
+      "library": Object {
+        "type": "commonjs2",
+      },
+    },
+  },
+  "externals": Object {
+    "read-pkg": "commonjs2 read-pkg",
+    "read-pkg-up": "commonjs2 read-pkg-up",
+    "resolve-bin": "commonjs2 resolve-bin",
+  },
+  "mode": "development",
+  "module": Object {
+    "rules": Array [
+      Object {
+        "exclude": /node_modules\\\\/\\(\\?!\\(@10up\\\\/block-components\\)\\\\/\\)\\.\\*/,
+        "test": /\\^\\(\\?!\\.\\*\\\\\\.d\\\\\\.tsx\\?\\$\\)\\.\\*\\\\\\.\\[tj\\]sx\\?\\$/,
+        "use": Array [
+          "/node_modules/thread-loader/dist/cjs.js",
+          Object {
+            "loader": "/node_modules/babel-loader/lib/index.js",
+            "options": Object {
+              "babelrc": false,
+              "cacheDirectory": true,
+              "configFile": false,
+              "presets": Array [
+                Array [
+                  "/packages/babel-preset-default/index.js",
+                  Object {
+                    "targets": Array [
+                      "> 1%",
+                      "ie >= 11",
+                      "Firefox ESR",
+                      "last 2 versions",
+                    ],
+                    "useBuiltIns": false,
+                    "wordpress": true,
+                  },
+                ],
+              ],
+              "sourceType": "unambiguous",
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.svg\\$/,
+        "use": Array [
+          "@svgr/webpack",
+          "url-loader",
+        ],
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "test": /\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/postcss-loader/dist/cjs.js",
+            "options": Object {
+              "postcssOptions": Object {
+                "config": "/config/postcss.config.js",
+              },
+            },
+          },
+        ],
+      },
+      Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
+        "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
+          Object {
+            "loader": "/node_modules/postcss-loader/dist/cjs.js",
+            "options": Object {
+              "postcssOptions": Object {
+                "config": "/config/postcss.config.js",
+              },
+            },
+          },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.\\(woff\\(2\\)\\?\\|ttf\\|eot\\|svg\\|jpg\\|jpeg\\|png\\|giff\\|webp\\)\\(\\\\\\?v=\\\\d\\+\\\\\\.\\\\d\\+\\\\\\.\\\\d\\+\\)\\?\\$/,
+        "type": "asset/resource",
+      },
+    ],
+  },
+  "optimization": Object {
+    "concatenateModules": false,
+    "minimizer": Array [
+      TerserPlugin: {"test":{},"extractComments":true,"parallel":true,"terserOptions":{"parse":{"ecma":8},"compress":{"ecma":5,"warnings":false,"comparisons":false,"inline":2}}},
+    ],
+  },
+  "output": Object {
+    "path": "/dist",
+  },
+  "performance": Object {
+    "hints": "warning",
+    "maxAssetSize": 10240000,
+    "maxEntrypointSize": 40960000,
+  },
+  "plugins": Array [
+    HtmlWebpackPlugin: {},
+    ESLintWebpackPlugin: {"extensions":"js","emitError":true,"emitWarning":true,"failOnError":false,"fix":false},
+    MiniCssExtractPlugin: {"ignoreOrder":false,"chunkFilename":"[id].css"},
+    ImageminPlugin: {"disable":true,"imageminOptions":{"plugins":[null,null,null,null]},"externalImages":{"context":".","sources":[],"destination":".","fileName":null},"cacheFolder":null},
+    StylelintWebpackPlugin: {"files":"**/*.(s(c|a)ss|css)","stylelintPath":"stylelint","context":"/assets","allowEmptyInput":true,"configFile":"/config/stylelint.config.js"},
+    WebpackBarPlugin: {"name":"webpack","color":"green","reporters":["basic"],"reporter":null},
+    CleanExtractedDeps: {},
+  ],
+  "resolve": Object {
+    "alias": Object {
+      "lodash-es": "lodash",
+    },
+    "extensions": Array [
+      ".tsx",
+      ".ts",
+      ".js",
+    ],
+  },
+  "stats": Object {
+    "all": false,
+    "assets": true,
+    "errorDetails": true,
+    "errors": true,
+    "excludeAssets": /\\\\\\.\\(jpe\\?g\\|png\\|gif\\|svg\\|woff\\|woff2\\)\\$/i,
+    "moduleTrace": true,
+    "modules": true,
+    "performance": true,
+    "warnings": true,
+  },
+  "target": "browserslist:> 1%, ie >= 11, Firefox ESR, last 2 versions",
+}
+`;
+
 exports[`webpack.config.js properly detects user config files in package mode 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -177,6 +372,7 @@ Object {
 
 exports[`webpack.config.js properly detects user config files in project mode 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "entry1": "entry1.js",
@@ -341,6 +537,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for package config 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -537,6 +734,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for package config with commonjs2 format 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -725,6 +923,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for package config with peer deps 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "main": Object {
@@ -922,6 +1121,7 @@ Object {
 
 exports[`webpack.config.js returns proper configs for project configs 1`] = `
 Object {
+  "devServer": undefined,
   "devtool": "source-map",
   "entry": Object {
     "entry1": "entry1.js",

packages/toolkit/config/__tests__/webpack.config.js

@@ -192,4 +192,30 @@ describe('webpack.config.js', () => {
 
 		expect(webpackConfig).toMatchSnapshot();
 	});
+
+	it('adds devServer config when passing the --dev-server flag', () => {
+		process.argv.push('--dev-server');
+		process.argv.push('--port=3000');
+		getBuildFilesMock.mockReturnValue({});
+		getPackageMock.mockReturnValue({
+			name: '@10up/component-library',
+			source: 'src/index.js',
+			main: 'dist/index.js',
+			'umd:main': 'dist/index.umd.js',
+			dependencies: {
+				'read-pkg': '^5.2.0',
+				'read-pkg-up': '^1.0.1',
+				'resolve-bin': '^0.4.0',
+			},
+		});
+
+		let webpackConfig;
+		jest.isolateModules(() => {
+			// eslint-disable-next-line global-require
+			webpackConfig = require('../webpack.config');
+		});
+
+		expect(webpackConfig).toMatchSnapshot();
+		process.argv.pop();
+	});
 });

packages/toolkit/config/webpack.config.js

@@ -18,6 +18,7 @@ const {
 	getResolve,
 	getTarget,
 	getPerfomance,
+	getDevServer,
 } = require('./webpack');
 
 const projectConfig = getTenUpScriptsConfig();
@@ -46,6 +47,7 @@ const config = {
 module.exports = {
 	devtool: isProduction ? false : 'source-map',
 	mode,
+	devServer: getDevServer(config),
 	entry: getEntryPoints(config),
 	output: getOutput(config),
 	target: getTarget(config),

packages/toolkit/config/webpack/devServer.js

@@ -0,0 +1,13 @@
+const path = require('path');
+
+module.exports = ({ projectConfig: { devServer, devServerPort } }) => {
+	if (!devServer) {
+		return undefined;
+	}
+
+	return {
+		contentBase: path.join(__dirname, 'public'),
+		compress: true,
+		port: Number(devServerPort),
+	};
+};

packages/toolkit/config/webpack/entry.js

@@ -3,6 +3,7 @@ const removeDistFolder = (file) => {
 };
 module.exports = ({
 	isPackage,
+	projectConfig: { devServer },
 	packageConfig: { packageType, source, main, umd, libraryName },
 	buildFiles,
 }) => {
@@ -19,7 +20,7 @@ module.exports = ({
 			};
 		}
 
-		if (umd) {
+		if (umd && !devServer) {
 			config.umd = {
 				filename: removeDistFolder(umd),
 				import: `./${source}`,

packages/toolkit/config/webpack/index.js

@@ -8,6 +8,7 @@ const getModules = require('./modules');
 const getResolve = require('./resolve');
 const getTarget = require('./target');
 const getPerfomance = require('./perfomance');
+const getDevServer = require('./devServer');
 
 module.exports = {
 	getEntryPoints,
@@ -20,4 +21,5 @@ module.exports = {
 	getResolve,
 	getTarget,
 	getPerfomance,
+	getDevServer,
 };

packages/toolkit/config/webpack/plugins.js

@@ -7,6 +7,7 @@ const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
 const StyleLintPlugin = require('stylelint-webpack-plugin');
 const WebpackBar = require('webpackbar');
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CleanExtractedDeps = require('../../utils/clean-extracted-deps');
 
 const { hasStylelintConfig, fromConfigRoot } = require('../../utils');
@@ -18,10 +19,14 @@ const removeDistFolder = (file) => {
 module.exports = ({
 	isPackage,
 	isProduction,
-	projectConfig: { filenames, devURL, paths, wpDependencyExternals },
+	projectConfig: { devServer, filenames, devURL, paths, wpDependencyExternals },
 	packageConfig: { style },
 }) => {
 	return [
+		devServer &&
+			new HtmlWebpackPlugin({
+				template: 'pulic/index.html',
+			}),
 		new ESLintPlugin({
 			failOnError: false,
 			fix: false,

packages/toolkit/package.json

@@ -96,7 +96,9 @@
     "webpack": "^5.24.2",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-sources": "^2.2.0",
-    "webpackbar": "^5.0.0-3"
+    "webpackbar": "^5.0.0-3",
+    "html-webpack-plugin": "^5.3.1",
+    "webpack-dev-server": "^3.11.2"
   },
   "description": "Collection of reusable scripts for 10up development.",
   "engines": {