docs: Updated dependencies and installation docs (#134)

* Updated dependencies and installation docs * Fixing CI * Clearing commented code
gsoft-inc · Sep 8, 2023 · ec447a9 · ec447a9
1 parent 9460319
commit ec447a9
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 184 deletions.
diff --git a/docs/swc/configure-dev.md b/docs/swc/configure-dev.md
@@ -1,11 +1,11 @@
 ---
 order: 100
-label: Configure for dev
+label: Configure for development
 meta:
-    title: Configure for dev - SWC
+    title: Configure for development - SWC
 ---
 
-# Configure for dev
+# Configure for development
 
 To configure [SWC](https://swc.rs/) for a development environment, execute the following steps.
 

diff --git a/docs/tsup/configure-dev.md b/docs/tsup/configure-dev.md
@@ -1,11 +1,11 @@
 ---
 order: 100
-label: Configure for dev
+label: Configure for development
 meta:
-    title: Configure for dev - tsup
+    title: Configure for development - tsup
 ---
 
-# Configure for dev
+# Configure for development
 
 To configure [tsup](https://tsup.egoist.dev/) for a development environment, execute the following steps.
 

diff --git a/docs/webpack/configure-build.md b/docs/webpack/configure-build.md
@@ -15,21 +15,48 @@ Open a terminal at the root of the project and install the following packages:
 
 +++ pnpm
 ```bash
-pnpm add -D @workleap/webpack-configs webpack webpack-cli @swc/core @swc/helpers browserslist postcss @svgr/webpack
+pnpm add -D @workleap/webpack-configs webpack webpack-cli @swc/core @swc/helpers browserslist postcss
 ```
 +++ yarn
 ```bash
-yarn add -D @workleap/webpack-configs webpack webpack-cli @swc/core @swc/helpers browserslist postcss @svgr/webpack
+yarn add -D @workleap/webpack-configs webpack webpack-cli @swc/core @swc/helpers browserslist postcss
 ```
 +++ npm
 ```bash
-npm install -D @workleap/webpack-configs webpack webpack-cli @swc/core @swc/helpers browserslist postcss @svgr/webpack
+npm install -D @workleap/webpack-configs webpack webpack-cli @swc/core @swc/helpers browserslist postcss
 ```
 +++
 
 ## 2. Configure webpack
 
-First, create a configuration file named `webpack.build.js` at the root of the project:
+First, create a `public` folder with an `index.html` file at the root of the project:
+
+``` !#2-3
+web-project
+├── public
+├──── index.html
+├── src
+├──── ...
+├── package.json
+├── webpack.build.js
+```
+
+Then, open the newly created `index.html` file and copy/paste the following content:
+
+```html public/index.html
+<!DOCTYPE html>
+<html>
+    <head>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
+```
+
+The content of the `public/index.html` file is the default template that will be used by [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/).
+
+Next, create a configuration file named `webpack.build.js` at the root of the project:
 
 ``` !#5
 web-project

diff --git a/docs/webpack/configure-dev.md b/docs/webpack/configure-dev.md
@@ -1,11 +1,11 @@
 ---
 order: 100
-label: Configure for dev
+label: Configure for development
 meta:
-    title: Configure for dev - webpack
+    title: Configure for development - webpack
 ---
 
-# Configure for dev
+# Configure for development
 
 To configure [webpack](https://webpack.js.org/) for a development environment, execute the following steps.
 
@@ -15,21 +15,48 @@ Open a terminal at the root of the project and install the following packages:
 
 +++ pnpm
 ```bash
-pnpm add -D @workleap/webpack-configs webpack webpack-cli webpack-dev-server @swc/core @swc/helpers browserslist postcss @svgr/webpack
+pnpm add -D @workleap/webpack-configs webpack webpack-cli webpack-dev-server @swc/core @swc/helpers browserslist postcss
 ```
 +++ yarn
 ```bash
-yarn add -D @workleap/webpack-configs webpack webpack-cli webpack-dev-server @swc/core @swc/helpers browserslist postcss @svgr/webpack
+yarn add -D @workleap/webpack-configs webpack webpack-cli webpack-dev-server @swc/core @swc/helpers browserslist postcss
 ```
 +++ npm
 ```bash
-npm install -D @workleap/webpack-configs webpack webpack-cli webpack-dev-server @swc/core @swc/helpers browserslist postcss @svgr/webpack
+npm install -D @workleap/webpack-configs webpack webpack-cli webpack-dev-server @swc/core @swc/helpers browserslist postcss
 ```
 +++
 
 ## 2. Configure webpack
 
-First, create a configuration file named `webpack.dev.js` at the root of the project:
+First, create a `public` folder with an `index.html` file at the root of the project:
+
+``` !#2-3
+web-project
+├── public
+├──── index.html
+├── src
+├──── ...
+├── package.json
+├── webpack.dev.js
+```
+
+Then, open the newly created `index.html` file and copy/paste the following content:
+
+```html public/index.html
+<!DOCTYPE html>
+<html>
+    <head>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>
+```
+
+The content of the `public/index.html` file is the default template that will be used by [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/).
+
+Next, create a configuration file named `webpack.dev.js` at the root of the project:
 
 ``` !#5
 web-project

diff --git a/docs/webpack/default.md b/docs/webpack/default.md
@@ -62,6 +62,7 @@ The shared configurations offered by `@workleap/webpack-configs` includes the fo
 
 ### Production
 
+- File system caching
 - Minification
 - Output to `/dist`
 

diff --git a/packages/webpack-configs/package.json b/packages/webpack-configs/package.json
@@ -32,6 +32,7 @@
     },
     "dependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+        "@svgr/webpack": "8.1.0",
         "css-loader": "6.8.1",
         "html-webpack-plugin": "5.5.3",
         "mini-css-extract-plugin": "2.7.6",
@@ -41,21 +42,19 @@
         "terser-webpack-plugin": "5.3.9"
     },
     "peerDependencies": {
-        "@svgr/webpack": "*",
         "@swc/core": "*",
         "@swc/helpers": "*",
         "browserslist": "*",
         "postcss": "*",
-        "webpack": "*",
-        "webpack-dev-server": "*"
+        "webpack": ">=5.0.0",
+        "webpack-dev-server": ">=4.0.0"
     },
     "peerDependenciesMeta": {
         "webpack-dev-server": {
             "optional": true
         }
     },
     "devDependencies": {
-        "@svgr/webpack": "8.1.0",
         "@swc/core": "1.3.82",
         "@swc/helpers": "0.5.1",
         "@swc/jest": "0.2.29",

diff --git a/packages/webpack-configs/src/build.ts b/packages/webpack-configs/src/build.ts
@@ -3,7 +3,6 @@ import HtmlWebpackPlugin from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import { createRequire } from "node:module";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import TerserPlugin from "terser-webpack-plugin";
 import type { Configuration as WebpackConfig } from "webpack";
 import webpack from "webpack";
@@ -105,9 +104,6 @@ export function defineBuildConfig(swcConfig: SwcConfig, options: DefineBuildConf
         cache: cache && {
             type: "filesystem",
             allowCollectingMemory: false,
-            buildDependencies: {
-                config: [fileURLToPath(import.meta.url)]
-            },
             cacheDirectory: cacheDirectory
         },
         // Fixes caching for environmental variables using the DefinePlugin by forcing

diff --git a/packages/webpack-configs/src/dev.ts b/packages/webpack-configs/src/dev.ts
@@ -4,7 +4,6 @@ import type { Config as SwcConfig } from "@swc/core";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import { createRequire } from "node:module";
 import path from "node:path";
-import { fileURLToPath } from "node:url";
 import type { Configuration as WebpackConfig } from "webpack";
 import webpack from "webpack";
 import { applyTransformers, type WebpackConfigTransformer } from "./transformers/applyTransformers.ts";
@@ -112,9 +111,6 @@ export function defineDevConfig(swcConfig: SwcConfig, options: DefineDevConfigOp
             type: "filesystem",
             allowCollectingMemory: true,
             maxMemoryGenerations: 1,
-            buildDependencies: {
-                config: [fileURLToPath(import.meta.url)]
-            },
             cacheDirectory: cacheDirectory
         },
         // Fixes caching for environmental variables using the DefinePlugin by forcing

diff --git a/packages/webpack-configs/tests/build.test.ts b/packages/webpack-configs/tests/build.test.ts
@@ -260,7 +260,7 @@ test("when the verbose option is true, the transformers context verbose value is
 });
 
 describe("defineBuildHtmlWebpackPluginConfig", () => {
-    test("merge the default options with the provided values", () => {
+    test("merge the default options with the provided options", () => {
         const result = defineBuildHtmlWebpackPluginConfig({
             filename: "a-custom-filename"
         });
@@ -279,7 +279,7 @@ describe("defineBuildHtmlWebpackPluginConfig", () => {
 });
 
 describe("defineMiniCssExtractPluginConfig", () => {
-    test("merge the default options with the provided values", () => {
+    test("merge the default options with the provided options", () => {
         const result = defineMiniCssExtractPluginConfig({
             chunkFilename: "a-custom-chunk-filename"
         });

diff --git a/packages/webpack-configs/tests/dev.test.ts b/packages/webpack-configs/tests/dev.test.ts
@@ -318,7 +318,7 @@ test("when the verbose option is true, the transformers context verbose value is
 });
 
 describe("defineDevHtmlWebpackPluginConfig", () => {
-    test("merge the default options with the provided values", () => {
+    test("merge the default options with the provided options", () => {
         const result = defineDevHtmlWebpackPluginConfig({
             filename: "a-custom-filename"
         });
@@ -337,7 +337,7 @@ describe("defineDevHtmlWebpackPluginConfig", () => {
 });
 
 describe("defineFastRefreshPluginConfig", () => {
-    test("merge the default options with the provided values", () => {
+    test("merge the default options with the provided options", () => {
         const result = defineFastRefreshPluginConfig({
             exclude: "a-custom-exclude"
         });