From 93a45c89a0eeecc34f7a14e376977b6927f320bb Mon Sep 17 00:00:00 2001 From: Arnav Date: Thu, 14 Mar 2024 03:14:44 +0530 Subject: [PATCH 01/14] test --- .gitignore | 3 ++ apps/react/.gitignore | 1 + apps/react/package.json | 15 ++++++++++ bin/create-app.js | 65 +++++++++++++++++++++++++++++++++++++++++ package.json | 5 +++- 5 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 apps/react/.gitignore create mode 100644 apps/react/package.json create mode 100644 bin/create-app.js diff --git a/.gitignore b/.gitignore index 9514a890c09..6747ce894ca 100644 --- a/.gitignore +++ b/.gitignore @@ -67,3 +67,6 @@ test/**/dist test/**/**/dist test/**/**/**/dist test/**/stats.json + +# private readme +private_readme.md \ No newline at end of file diff --git a/apps/react/.gitignore b/apps/react/.gitignore new file mode 100644 index 00000000000..b512c09d476 --- /dev/null +++ b/apps/react/.gitignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/apps/react/package.json b/apps/react/package.json new file mode 100644 index 00000000000..133b1ad930f --- /dev/null +++ b/apps/react/package.json @@ -0,0 +1,15 @@ +{ + "name": "react", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "webpack": "^5.90.3" + } +} diff --git a/bin/create-app.js b/bin/create-app.js new file mode 100644 index 00000000000..22a63dba937 --- /dev/null +++ b/bin/create-app.js @@ -0,0 +1,65 @@ +const { execSync } = require('child_process'); +const path = require('path'); +const readlineSync = require('readline-sync'); +const fs = require('fs'); + +if (process.argv.length < 3) { + console.log('You have to provide a name to your app.'); + console.log('For example :'); + console.log(' npx create-my-boilerplate my-app'); + process.exit(1); +} + +const projectName = process.argv[2]; +const currentPath = process.cwd(); +const projectPath = path.join(currentPath, projectName); + +try { + fs.mkdirSync(projectPath); + } catch (err) { + if (err.code === 'EEXIST') { + console.log(`The file ${projectName} already exist in the current directory, please give it another name.`); + } else { + console.log(error); + } + process.exit(1); + } + + async function promptForFramework() { + const frameworks = ['react', 'vue']; + const index = readlineSync.keyInSelect(frameworks, 'Choose a framework:'); + if (index === -1) { + console.log('You must choose a framework.'); + process.exit(1); + } + return frameworks[index]; + } + + const framework = promptForFramework(); + + async function main() { + try { + console.log(`Creating ${framework} app.....`) + console.log('Copying files...'); + + execSync(`git clone --depth 1 ${git_repo} ${projectPath}`); + + process.chdir(projectPath); + + console.log('Installing dependencies...'); + execSync('npm install'); + + console.log('Removing useless files'); + execSync('npx rimraf ./.git'); + fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true}); + + console.log('The installation is done, this is ready to use !'); + + // instead just create new files or copy them from the apps directory + + } catch (error) { + console.log(error); + } +} + +main(); \ No newline at end of file diff --git a/package.json b/package.json index 0077f648e6e..278ccf5c548 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,10 @@ "name": "webpack-cli-monorepo", "description": "CLI for webpack & friends", "license": "MIT", - "private": true, + "private": true, + "bin": { + "create-webpack-app": "./create-app.js" + }, "repository": { "type": "git", "url": "https://github.com/webpack/webpack-cli.git" From 4355ebc377fe0963f17554b65d9ac31642e94b22 Mon Sep 17 00:00:00 2001 From: Arnav Date: Thu, 14 Mar 2024 03:43:02 +0530 Subject: [PATCH 02/14] add: add boilerplate script --- bin/create-app.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/bin/create-app.js b/bin/create-app.js index 22a63dba937..2d1d3f4a91a 100644 --- a/bin/create-app.js +++ b/bin/create-app.js @@ -13,6 +13,7 @@ if (process.argv.length < 3) { const projectName = process.argv[2]; const currentPath = process.cwd(); const projectPath = path.join(currentPath, projectName); +const git_repo = "https://github.com/info-arnav/webpack-cli.git"; try { fs.mkdirSync(projectPath); @@ -39,13 +40,17 @@ try { async function main() { try { - console.log(`Creating ${framework} app.....`) - console.log('Copying files...'); + console.log(`Creating webpack-${framework} app.....`) + console.log('Downloading files...'); - execSync(`git clone --depth 1 ${git_repo} ${projectPath}`); + execSync(`git clone --no-checkout --depth 1 ${git_repo} ${projectPath}`); process.chdir(projectPath); + execSync('git config core.sparseCheckout true'); + execSync(`echo "apps/${framework}" >> .git/info/sparse-checkout`); + execSync('git checkout'); + console.log('Installing dependencies...'); execSync('npm install'); @@ -55,8 +60,6 @@ try { console.log('The installation is done, this is ready to use !'); - // instead just create new files or copy them from the apps directory - } catch (error) { console.log(error); } From 570449265039469c57b51d4a37053ab8bed3447d Mon Sep 17 00:00:00 2001 From: Arnav Date: Thu, 14 Mar 2024 03:53:28 +0530 Subject: [PATCH 03/14] add: react boilerplate --- apps/react/package.json | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/apps/react/package.json b/apps/react/package.json index 133b1ad930f..3af600af5e1 100644 --- a/apps/react/package.json +++ b/apps/react/package.json @@ -9,7 +9,17 @@ "keywords": [], "author": "", "license": "ISC", + "devDependencies": { + "@babel/core": "^7.24.0", + "@babel/preset-env": "^7.24.0", + "@babel/preset-react": "^7.23.3", + "babel-loader": "^9.1.3", + "webpack": "^5.90.3", + "webpack-cli": "^5.1.4", + "webpack-dev-server": "^5.0.3" + }, "dependencies": { - "webpack": "^5.90.3" + "react": "^18.2.0", + "react-dom": "^18.2.0" } } From 1591b8d49294dfee9f5d0cd86fbba7c1bfd043fe Mon Sep 17 00:00:00 2001 From: Arnav Date: Thu, 14 Mar 2024 03:53:32 +0530 Subject: [PATCH 04/14] add: react boilerplate --- apps/react/src/App.js | 7 +++++++ apps/react/src/index.css | 0 apps/react/src/index.html | 13 +++++++++++++ apps/react/src/index.js | 6 ++++++ apps/react/webpack.config.js | 19 +++++++++++++++++++ 5 files changed, 45 insertions(+) create mode 100644 apps/react/src/App.js create mode 100644 apps/react/src/index.css create mode 100644 apps/react/src/index.html create mode 100644 apps/react/src/index.js create mode 100644 apps/react/webpack.config.js diff --git a/apps/react/src/App.js b/apps/react/src/App.js new file mode 100644 index 00000000000..7a3c2161738 --- /dev/null +++ b/apps/react/src/App.js @@ -0,0 +1,7 @@ +export default function App() { + return ( +
+

Your webpack app is working

+
+ ) +} \ No newline at end of file diff --git a/apps/react/src/index.css b/apps/react/src/index.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/apps/react/src/index.html b/apps/react/src/index.html new file mode 100644 index 00000000000..c33ef8f2c87 --- /dev/null +++ b/apps/react/src/index.html @@ -0,0 +1,13 @@ + + + + + + Webpack React Application + + + +
You need to enable JavaScript to run this app.
+ + + \ No newline at end of file diff --git a/apps/react/src/index.js b/apps/react/src/index.js new file mode 100644 index 00000000000..a8942a35015 --- /dev/null +++ b/apps/react/src/index.js @@ -0,0 +1,6 @@ +import ReactDOM from "react-dom/client"; +import App from "./App"; + +const root = ReactDOM.createRoot(document.getElementById("app")); + +root.render(); \ No newline at end of file diff --git a/apps/react/webpack.config.js b/apps/react/webpack.config.js new file mode 100644 index 00000000000..65f0215bc05 --- /dev/null +++ b/apps/react/webpack.config.js @@ -0,0 +1,19 @@ +const path = require("path"); +module.exports = { + entry: "./src/index.js", + output: { path: path.resolve(__dirname, "dist") }, + module: { + rules: [ + { + test: /.(js|jsx)$/, + exclude: /node_modules/, + use: { + loader: "babel-loader", + options: { + presets: ["@babel/preset-env", "@babel/preset-react"], + }, + }, + }, + ], + }, +}; From 78c59c89b55a67ef6606954ce15bf6d22fce514e Mon Sep 17 00:00:00 2001 From: Arnav Date: Fri, 15 Mar 2024 00:11:42 +0530 Subject: [PATCH 05/14] feat: dot env plugin --- plugin/dotenv.js | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 plugin/dotenv.js diff --git a/plugin/dotenv.js b/plugin/dotenv.js new file mode 100644 index 00000000000..cff3ea2df45 --- /dev/null +++ b/plugin/dotenv.js @@ -0,0 +1,35 @@ +const interpolate = (env, vars) => { + const matches = env.match(/\$([a-zA-Z0-9_]+)|\${([a-zA-Z0-9_]+)}/g) || []; + + matches.forEach((match) => { + const key = match.replace(/\$|{|}/g, ''); + let variable = vars[key] || ''; + variable = interpolate(variable, vars); + env = env.replace(match, variable); + }); + + return env; + }; + + class DotEnvPlugin { + constructor() { + } + + apply(compiler) { + compiler.hooks.emit.tap('DotEnvPlugin', (compilation) => { + const assets = compilation.assets; + Object.keys(assets).forEach((assetName) => { + let asset = assets[assetName]; + asset.source = this.replaceProcessEnv(asset.source); + }); + }); + } + + replaceProcessEnv(source) { + const envRegex = /process\.env\.([a-zA-Z0-9_]+)/g; + return interpolate(source, process.env); + } + } + + module.exports = DotEnvPlugin; + \ No newline at end of file From af339c9c942428f5e14a03eca697ba3fb75ed77e Mon Sep 17 00:00:00 2001 From: Arnav Date: Mon, 18 Mar 2024 21:11:45 +0530 Subject: [PATCH 06/14] main branch normal --- apps/react/.gitignore | 1 - apps/react/package.json | 25 ------------------------- apps/react/src/App.js | 7 ------- apps/react/src/index.css | 0 apps/react/src/index.html | 13 ------------- apps/react/src/index.js | 6 ------ apps/react/webpack.config.js | 19 ------------------- package.json | 3 --- plugin/dotenv.js | 35 ----------------------------------- 9 files changed, 109 deletions(-) delete mode 100644 apps/react/.gitignore delete mode 100644 apps/react/package.json delete mode 100644 apps/react/src/App.js delete mode 100644 apps/react/src/index.css delete mode 100644 apps/react/src/index.html delete mode 100644 apps/react/src/index.js delete mode 100644 apps/react/webpack.config.js delete mode 100644 plugin/dotenv.js diff --git a/apps/react/.gitignore b/apps/react/.gitignore deleted file mode 100644 index b512c09d476..00000000000 --- a/apps/react/.gitignore +++ /dev/null @@ -1 +0,0 @@ -node_modules \ No newline at end of file diff --git a/apps/react/package.json b/apps/react/package.json deleted file mode 100644 index 3af600af5e1..00000000000 --- a/apps/react/package.json +++ /dev/null @@ -1,25 +0,0 @@ -{ - "name": "react", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [], - "author": "", - "license": "ISC", - "devDependencies": { - "@babel/core": "^7.24.0", - "@babel/preset-env": "^7.24.0", - "@babel/preset-react": "^7.23.3", - "babel-loader": "^9.1.3", - "webpack": "^5.90.3", - "webpack-cli": "^5.1.4", - "webpack-dev-server": "^5.0.3" - }, - "dependencies": { - "react": "^18.2.0", - "react-dom": "^18.2.0" - } -} diff --git a/apps/react/src/App.js b/apps/react/src/App.js deleted file mode 100644 index 7a3c2161738..00000000000 --- a/apps/react/src/App.js +++ /dev/null @@ -1,7 +0,0 @@ -export default function App() { - return ( -
-

Your webpack app is working

-
- ) -} \ No newline at end of file diff --git a/apps/react/src/index.css b/apps/react/src/index.css deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/apps/react/src/index.html b/apps/react/src/index.html deleted file mode 100644 index c33ef8f2c87..00000000000 --- a/apps/react/src/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Webpack React Application - - - -
You need to enable JavaScript to run this app.
- - - \ No newline at end of file diff --git a/apps/react/src/index.js b/apps/react/src/index.js deleted file mode 100644 index a8942a35015..00000000000 --- a/apps/react/src/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import ReactDOM from "react-dom/client"; -import App from "./App"; - -const root = ReactDOM.createRoot(document.getElementById("app")); - -root.render(); \ No newline at end of file diff --git a/apps/react/webpack.config.js b/apps/react/webpack.config.js deleted file mode 100644 index 65f0215bc05..00000000000 --- a/apps/react/webpack.config.js +++ /dev/null @@ -1,19 +0,0 @@ -const path = require("path"); -module.exports = { - entry: "./src/index.js", - output: { path: path.resolve(__dirname, "dist") }, - module: { - rules: [ - { - test: /.(js|jsx)$/, - exclude: /node_modules/, - use: { - loader: "babel-loader", - options: { - presets: ["@babel/preset-env", "@babel/preset-react"], - }, - }, - }, - ], - }, -}; diff --git a/package.json b/package.json index 278ccf5c548..d6dfa4790c3 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,6 @@ "description": "CLI for webpack & friends", "license": "MIT", "private": true, - "bin": { - "create-webpack-app": "./create-app.js" - }, "repository": { "type": "git", "url": "https://github.com/webpack/webpack-cli.git" diff --git a/plugin/dotenv.js b/plugin/dotenv.js deleted file mode 100644 index cff3ea2df45..00000000000 --- a/plugin/dotenv.js +++ /dev/null @@ -1,35 +0,0 @@ -const interpolate = (env, vars) => { - const matches = env.match(/\$([a-zA-Z0-9_]+)|\${([a-zA-Z0-9_]+)}/g) || []; - - matches.forEach((match) => { - const key = match.replace(/\$|{|}/g, ''); - let variable = vars[key] || ''; - variable = interpolate(variable, vars); - env = env.replace(match, variable); - }); - - return env; - }; - - class DotEnvPlugin { - constructor() { - } - - apply(compiler) { - compiler.hooks.emit.tap('DotEnvPlugin', (compilation) => { - const assets = compilation.assets; - Object.keys(assets).forEach((assetName) => { - let asset = assets[assetName]; - asset.source = this.replaceProcessEnv(asset.source); - }); - }); - } - - replaceProcessEnv(source) { - const envRegex = /process\.env\.([a-zA-Z0-9_]+)/g; - return interpolate(source, process.env); - } - } - - module.exports = DotEnvPlugin; - \ No newline at end of file From b725d608d6006216e6353462238754bb9616887b Mon Sep 17 00:00:00 2001 From: Arnav Date: Sat, 30 Mar 2024 15:01:00 +0530 Subject: [PATCH 07/14] fix: removed boilerplate --- bin/create-app.js | 68 ----------------------------------------------- 1 file changed, 68 deletions(-) delete mode 100644 bin/create-app.js diff --git a/bin/create-app.js b/bin/create-app.js deleted file mode 100644 index 2d1d3f4a91a..00000000000 --- a/bin/create-app.js +++ /dev/null @@ -1,68 +0,0 @@ -const { execSync } = require('child_process'); -const path = require('path'); -const readlineSync = require('readline-sync'); -const fs = require('fs'); - -if (process.argv.length < 3) { - console.log('You have to provide a name to your app.'); - console.log('For example :'); - console.log(' npx create-my-boilerplate my-app'); - process.exit(1); -} - -const projectName = process.argv[2]; -const currentPath = process.cwd(); -const projectPath = path.join(currentPath, projectName); -const git_repo = "https://github.com/info-arnav/webpack-cli.git"; - -try { - fs.mkdirSync(projectPath); - } catch (err) { - if (err.code === 'EEXIST') { - console.log(`The file ${projectName} already exist in the current directory, please give it another name.`); - } else { - console.log(error); - } - process.exit(1); - } - - async function promptForFramework() { - const frameworks = ['react', 'vue']; - const index = readlineSync.keyInSelect(frameworks, 'Choose a framework:'); - if (index === -1) { - console.log('You must choose a framework.'); - process.exit(1); - } - return frameworks[index]; - } - - const framework = promptForFramework(); - - async function main() { - try { - console.log(`Creating webpack-${framework} app.....`) - console.log('Downloading files...'); - - execSync(`git clone --no-checkout --depth 1 ${git_repo} ${projectPath}`); - - process.chdir(projectPath); - - execSync('git config core.sparseCheckout true'); - execSync(`echo "apps/${framework}" >> .git/info/sparse-checkout`); - execSync('git checkout'); - - console.log('Installing dependencies...'); - execSync('npm install'); - - console.log('Removing useless files'); - execSync('npx rimraf ./.git'); - fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true}); - - console.log('The installation is done, this is ready to use !'); - - } catch (error) { - console.log(error); - } -} - -main(); \ No newline at end of file From 02ee878dfcb8bec5fff14125982a5b2e161d958a Mon Sep 17 00:00:00 2001 From: Arnav Date: Sat, 30 Mar 2024 15:01:50 +0530 Subject: [PATCH 08/14] fix: master --- bin/create-app.js | 68 ----------------------------------------------- 1 file changed, 68 deletions(-) delete mode 100644 bin/create-app.js diff --git a/bin/create-app.js b/bin/create-app.js deleted file mode 100644 index 2d1d3f4a91a..00000000000 --- a/bin/create-app.js +++ /dev/null @@ -1,68 +0,0 @@ -const { execSync } = require('child_process'); -const path = require('path'); -const readlineSync = require('readline-sync'); -const fs = require('fs'); - -if (process.argv.length < 3) { - console.log('You have to provide a name to your app.'); - console.log('For example :'); - console.log(' npx create-my-boilerplate my-app'); - process.exit(1); -} - -const projectName = process.argv[2]; -const currentPath = process.cwd(); -const projectPath = path.join(currentPath, projectName); -const git_repo = "https://github.com/info-arnav/webpack-cli.git"; - -try { - fs.mkdirSync(projectPath); - } catch (err) { - if (err.code === 'EEXIST') { - console.log(`The file ${projectName} already exist in the current directory, please give it another name.`); - } else { - console.log(error); - } - process.exit(1); - } - - async function promptForFramework() { - const frameworks = ['react', 'vue']; - const index = readlineSync.keyInSelect(frameworks, 'Choose a framework:'); - if (index === -1) { - console.log('You must choose a framework.'); - process.exit(1); - } - return frameworks[index]; - } - - const framework = promptForFramework(); - - async function main() { - try { - console.log(`Creating webpack-${framework} app.....`) - console.log('Downloading files...'); - - execSync(`git clone --no-checkout --depth 1 ${git_repo} ${projectPath}`); - - process.chdir(projectPath); - - execSync('git config core.sparseCheckout true'); - execSync(`echo "apps/${framework}" >> .git/info/sparse-checkout`); - execSync('git checkout'); - - console.log('Installing dependencies...'); - execSync('npm install'); - - console.log('Removing useless files'); - execSync('npx rimraf ./.git'); - fs.rmdirSync(path.join(projectPath, 'bin'), { recursive: true}); - - console.log('The installation is done, this is ready to use !'); - - } catch (error) { - console.log(error); - } -} - -main(); \ No newline at end of file From b69badf1158f2dd15b52b8c1d0eb03476480ad60 Mon Sep 17 00:00:00 2001 From: Arnav Date: Mon, 1 Apr 2024 01:26:01 +0530 Subject: [PATCH 09/14] feat: creating a new bundle-analyzer-plugin in webpack itself --- packages/webpack-cli/bin/cli.js | 0 .../src/plugins/bundle-analyzer-plugin.ts | 14 ++++++ packages/webpack-cli/src/types.ts | 1 - packages/webpack-cli/src/webpack-cli.ts | 44 +++++-------------- 4 files changed, 26 insertions(+), 33 deletions(-) mode change 100755 => 100644 packages/webpack-cli/bin/cli.js create mode 100644 packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts diff --git a/packages/webpack-cli/bin/cli.js b/packages/webpack-cli/bin/cli.js old mode 100755 new mode 100644 diff --git a/packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts b/packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts new file mode 100644 index 00000000000..d5b7abc6e70 --- /dev/null +++ b/packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts @@ -0,0 +1,14 @@ +export class BundleAnalyzerPlugin { + constructor() { + // refer to https://github.com/webpack-contrib/webpack-bundle-analyzer.git and add those functions here + // Convert to TS + // Use webpack components such as logger etc + console.log("TBD"); + } + + apply() { + console.log("TBD"); + } +} + +module.exports = BundleAnalyzerPlugin; diff --git a/packages/webpack-cli/src/types.ts b/packages/webpack-cli/src/types.ts index edbc901b7f3..b6d6d90d037 100644 --- a/packages/webpack-cli/src/types.ts +++ b/packages/webpack-cli/src/types.ts @@ -244,7 +244,6 @@ interface CLIPluginOptions { hot?: boolean | "only"; progress?: boolean | "profile"; prefetch?: string; - analyze?: boolean; } type BasicPrimitive = string | boolean | number; diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 73b194338b8..786648f2d75 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -87,11 +87,12 @@ class WebpackCLI implements IWebpackCLI { isColorSupportChanged: boolean | undefined; builtInOptionsCache: WebpackCLIBuiltInOption[] | undefined; webpack!: typeof webpack; + analyze: boolean; program: WebpackCLICommand; constructor() { this.colors = this.createColors(); this.logger = this.getLogger(); - + this.analyze = false; // Initialize program this.program = program; this.program.name("webpack"); @@ -985,20 +986,6 @@ class WebpackCLI implements IWebpackCLI { "Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`).", helpLevel: "verbose", }, - - // Adding more plugins - { - name: "analyze", - configs: [ - { - type: "enum", - values: [true], - }, - ], - multiple: false, - description: "It invokes webpack-bundle-analyzer plugin to get bundle information.", - helpLevel: "minimum", - }, { name: "progress", configs: [ @@ -1373,6 +1360,7 @@ class WebpackCLI implements IWebpackCLI { cli.isColorSupportChanged = color; cli.colors = cli.createColors(color); }); + this.program.option("--analyze", "Analyze the webpack bundle."); this.program.option( "-v, --version", @@ -1382,6 +1370,10 @@ class WebpackCLI implements IWebpackCLI { // webpack-cli has it's own logic for showing suggestions this.program.showSuggestionAfterError(false); + this.program.on("option:analyze", function () { + cli.analyze = true; + }); + const outputHelp = async ( options: string[], isVerbose: boolean, @@ -2159,22 +2151,6 @@ class WebpackCLI implements IWebpackCLI { config: WebpackCLIConfig, options: Partial, ): Promise { - if (options.analyze) { - if (!this.checkPackageExists("webpack-bundle-analyzer")) { - await this.doInstall("webpack-bundle-analyzer", { - preMessage: () => { - this.logger.error( - `It looks like ${this.colors.yellow("webpack-bundle-analyzer")} is not installed.`, - ); - }, - }); - - this.logger.success( - `${this.colors.yellow("webpack-bundle-analyzer")} was installed successfully.`, - ); - } - } - if (typeof options.progress === "string" && options.progress !== "profile") { this.logger.error( `'${options.progress}' is an invalid value for the --progress option. Only 'profile' is allowed.`, @@ -2348,12 +2324,16 @@ class WebpackCLI implements IWebpackCLI { item.plugins = []; } + if (this.analyze) { + const BundleAnalyzerPlugin = require("./plugins/bundle-analyzer-plugin"); + item.plugins.unshift(new BundleAnalyzerPlugin()); + } + item.plugins.unshift( new CLIPlugin({ configPath: config.path.get(item), helpfulOutput: !options.json, progress: options.progress, - analyze: options.analyze, isMultiCompiler: Array.isArray(config.options), }), ); From 3f4ff0568d6f3156c53259b2efb4c623274146fd Mon Sep 17 00:00:00 2001 From: Arnav Date: Sun, 7 Apr 2024 04:18:50 +0530 Subject: [PATCH 10/14] feat: added flags for bundle-analyzer-plugin --- cli-flags.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 cli-flags.js diff --git a/cli-flags.js b/cli-flags.js new file mode 100644 index 00000000000..d283102b176 --- /dev/null +++ b/cli-flags.js @@ -0,0 +1,54 @@ +const cliFlags = [ + { + name: "mode", + usage: "--mode ", + description: "The mode to run the analyzer in: server, static, or disabled.", + type: String, + defaultValue: "server", + }, + { + name: "report", + usage: "--report ", + description: 'Path to bundle report file that will be generated in "static" mode.', + type: String, + }, + { + name: "open", + usage: "--open", + description: "Automatically open report in default browser.", + type: Boolean, + defaultValue: false, + }, + { + name: "port", + usage: "--port ", + description: "Port that will be used in `server` mode, default is 8888.", + type: Number, + defaultValue: 8888, + }, + { + name: "host", + usage: "--host
", + description: "Host that will be used in `server` mode, default is 127.0.0.1.", + type: String, + defaultValue: "127.0.0.1", + }, + { + name: "log-level", + usage: "--log-level ", + description: "Level of logger (info, warn, error, silent).", + type: String, + values: ["debug", "info", "warn", "error", "silent"], + defaultValue: "info", + multiple: true, + }, + { + name: "exclude", + usage: "--exclude ", + description: "Assets that should be excluded from the report.", + type: String, + defaultValue: "info", + }, +]; + +module.exports = { cliFlags }; From e667afe59172bf3daa18353859ac7bfd10ffac7f Mon Sep 17 00:00:00 2001 From: Arnav Date: Sun, 7 Apr 2024 04:24:49 +0530 Subject: [PATCH 11/14] fix: removed unneccesary parts --- .gitignore | 3 -- .../src/plugins/bundle-analyzer-plugin.ts | 14 ------- packages/webpack-cli/src/types.ts | 1 - packages/webpack-cli/src/webpack-cli.ts | 41 +++++++++++++------ 4 files changed, 29 insertions(+), 30 deletions(-) delete mode 100644 packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts diff --git a/.gitignore b/.gitignore index 6747ce894ca..9514a890c09 100644 --- a/.gitignore +++ b/.gitignore @@ -67,6 +67,3 @@ test/**/dist test/**/**/dist test/**/**/**/dist test/**/stats.json - -# private readme -private_readme.md \ No newline at end of file diff --git a/packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts b/packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts deleted file mode 100644 index d5b7abc6e70..00000000000 --- a/packages/webpack-cli/src/plugins/bundle-analyzer-plugin.ts +++ /dev/null @@ -1,14 +0,0 @@ -export class BundleAnalyzerPlugin { - constructor() { - // refer to https://github.com/webpack-contrib/webpack-bundle-analyzer.git and add those functions here - // Convert to TS - // Use webpack components such as logger etc - console.log("TBD"); - } - - apply() { - console.log("TBD"); - } -} - -module.exports = BundleAnalyzerPlugin; diff --git a/packages/webpack-cli/src/types.ts b/packages/webpack-cli/src/types.ts index b6d6d90d037..f0a52ac4c95 100644 --- a/packages/webpack-cli/src/types.ts +++ b/packages/webpack-cli/src/types.ts @@ -171,7 +171,6 @@ type WebpackDevServerOptions = DevServerConfig & nodeEnv?: "string"; watchOptionsStdin?: boolean; progress?: boolean | "profile" | undefined; - analyze?: boolean; prefetch?: string; json?: boolean; entry: EntryOptions; diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 786648f2d75..1d45064dc15 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -87,12 +87,10 @@ class WebpackCLI implements IWebpackCLI { isColorSupportChanged: boolean | undefined; builtInOptionsCache: WebpackCLIBuiltInOption[] | undefined; webpack!: typeof webpack; - analyze: boolean; program: WebpackCLICommand; constructor() { this.colors = this.createColors(); this.logger = this.getLogger(); - this.analyze = false; // Initialize program this.program = program; this.program.name("webpack"); @@ -973,6 +971,18 @@ class WebpackCLI implements IWebpackCLI { multiple: false, description: "Sets process.env.NODE_ENV to the specified value.", helpLevel: "minimum", + }, // Adding more plugins + { + name: "analyze", + configs: [ + { + type: "enum", + values: [true], + }, + ], + multiple: false, + description: "It invokes webpack-bundle-analyzer plugin to get bundle information.", + helpLevel: "minimum", }, { name: "define-process-env-node-env", @@ -1360,7 +1370,6 @@ class WebpackCLI implements IWebpackCLI { cli.isColorSupportChanged = color; cli.colors = cli.createColors(color); }); - this.program.option("--analyze", "Analyze the webpack bundle."); this.program.option( "-v, --version", @@ -1370,10 +1379,6 @@ class WebpackCLI implements IWebpackCLI { // webpack-cli has it's own logic for showing suggestions this.program.showSuggestionAfterError(false); - this.program.on("option:analyze", function () { - cli.analyze = true; - }); - const outputHelp = async ( options: string[], isVerbose: boolean, @@ -2151,6 +2156,22 @@ class WebpackCLI implements IWebpackCLI { config: WebpackCLIConfig, options: Partial, ): Promise { + if (options.analyze) { + if (!this.checkPackageExists("webpack-bundle-analyzer")) { + await this.doInstall("webpack-bundle-analyzer", { + preMessage: () => { + this.logger.error( + `It looks like ${this.colors.yellow("webpack-bundle-analyzer")} is not installed.`, + ); + }, + }); + + this.logger.success( + `${this.colors.yellow("webpack-bundle-analyzer")} was installed successfully.`, + ); + } + } + if (typeof options.progress === "string" && options.progress !== "profile") { this.logger.error( `'${options.progress}' is an invalid value for the --progress option. Only 'profile' is allowed.`, @@ -2324,16 +2345,12 @@ class WebpackCLI implements IWebpackCLI { item.plugins = []; } - if (this.analyze) { - const BundleAnalyzerPlugin = require("./plugins/bundle-analyzer-plugin"); - item.plugins.unshift(new BundleAnalyzerPlugin()); - } - item.plugins.unshift( new CLIPlugin({ configPath: config.path.get(item), helpfulOutput: !options.json, progress: options.progress, + analyze: options.analyze, isMultiCompiler: Array.isArray(config.options), }), ); From 6f24b146b530ceb2ff5bff684756f4f7954c2bd5 Mon Sep 17 00:00:00 2001 From: Arnav Date: Sun, 7 Apr 2024 15:21:58 +0530 Subject: [PATCH 12/14] fix: added analyze type to options --- packages/webpack-cli/src/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/webpack-cli/src/types.ts b/packages/webpack-cli/src/types.ts index f0a52ac4c95..9546f10b099 100644 --- a/packages/webpack-cli/src/types.ts +++ b/packages/webpack-cli/src/types.ts @@ -243,6 +243,7 @@ interface CLIPluginOptions { hot?: boolean | "only"; progress?: boolean | "profile"; prefetch?: string; + analyze?: boolean; } type BasicPrimitive = string | boolean | number; From f4f8d0ea19e2604c21a5c78e14483dc8eeae0fd7 Mon Sep 17 00:00:00 2001 From: Arnav Date: Sun, 7 Apr 2024 15:44:27 +0530 Subject: [PATCH 13/14] fix: improved flags --- .cspell.json | 2 + cli-flags.js | 193 +++++++++++++++++++++++++++++++++++++++------------ 2 files changed, 151 insertions(+), 44 deletions(-) diff --git a/.cspell.json b/.cspell.json index 156c2be7a33..5dd6e3f4b3d 100644 --- a/.cspell.json +++ b/.cspell.json @@ -4,6 +4,8 @@ "words": [ "Atsumu", "autoprefixer", + "treemap", + "Dont", "barbaz", "Cantarell", "Chizuru", diff --git a/cli-flags.js b/cli-flags.js index d283102b176..120d30db127 100644 --- a/cli-flags.js +++ b/cli-flags.js @@ -1,54 +1,159 @@ -const cliFlags = [ - { - name: "mode", - usage: "--mode ", - description: "The mode to run the analyzer in: server, static, or disabled.", - type: String, - defaultValue: "server", - }, - { - name: "report", - usage: "--report ", +"use strict"; + +module.exports = { + version: { + configs: [ + { + type: "boolean", + multiple: false, + description: "Output the version number", + path: "version", + }, + ], + description: "Output the version number", + simpleType: "boolean", + multiple: false, + }, + mode: { + configs: [ + { + type: "enum", + values: ["server", "static", "json"], + multiple: false, + description: "The mode to run the analyzer in: server, static, or json.", + path: "mode", + defaultValue: "server", + }, + ], + description: "The mode to run the analyzer in: server, static, or json.", + simpleType: "string", + multiple: false, + }, + report: { + configs: [ + { + type: "string", + multiple: false, + description: 'Path to bundle report file that will be generated in "static" mode.', + path: "report", + defaultValue: "report.html", + }, + ], description: 'Path to bundle report file that will be generated in "static" mode.', - type: String, - }, - { - name: "open", - usage: "--open", - description: "Automatically open report in default browser.", - type: Boolean, - defaultValue: false, - }, - { - name: "port", - usage: "--port ", + simpleType: "string", + multiple: false, + }, + title: { + configs: [ + { + type: "string", + multiple: false, + description: "String to use in title element of html report.", + path: "title", + defaultValue: "Webpack Bundle Report", + }, + ], + description: "String to use in title element of html report.", + simpleType: "string", + multiple: false, + }, + size: { + configs: [ + { + type: "enum", + values: ["stat", "parsed", "gzip"], + multiple: false, + description: "Module sizes to show in treemap by default.", + path: "defaultSizes", + defaultValue: "parsed", + }, + ], + description: "Module sizes to show in treemap by default.", + simpleType: "string", + multiple: false, + }, + "Dont Open": { + configs: [ + { + type: "boolean", + multiple: false, + description: "Don't open report in default browser automatically", + path: "noOpen", + defaultValue: false, + }, + ], + description: "Don't open report in default browser automatically", + simpleType: "boolean", + multiple: false, + }, + port: { + configs: [ + { + type: "number", + multiple: false, + description: "Port that will be used in `server` mode, default is 8888.", + path: "port", + defaultValue: 8888, + }, + ], description: "Port that will be used in `server` mode, default is 8888.", - type: Number, - defaultValue: 8888, + simpleType: "number", + multiple: false, }, - { - name: "host", - usage: "--host
", + host: { + configs: [ + { + type: "string", + multiple: false, + description: "Host that will be used in `server` mode, default is 127.0.0.1.", + path: "host", + defaultValue: "127.0.0.1", + }, + ], description: "Host that will be used in `server` mode, default is 127.0.0.1.", - type: String, - defaultValue: "127.0.0.1", + simpleType: "string", + multiple: false, }, - { - name: "log-level", - usage: "--log-level ", + "log-level": { + configs: [ + { + type: "enum", + values: ["debug", "info", "warn", "error", "silent"], + multiple: true, + description: "Level of logger (info, warn, error, silent).", + path: "logLevel", + defaultValue: "info", + }, + ], description: "Level of logger (info, warn, error, silent).", - type: String, - values: ["debug", "info", "warn", "error", "silent"], - defaultValue: "info", + simpleType: "string", multiple: true, }, - { - name: "exclude", - usage: "--exclude ", + exclude: { + configs: [ + { + type: "string", + multiple: false, + description: "Assets that should be excluded from the report.", + path: "exclude", + defaultValue: "", + }, + ], description: "Assets that should be excluded from the report.", - type: String, - defaultValue: "info", + simpleType: "string", + multiple: false, }, -]; - -module.exports = { cliFlags }; + help: { + configs: [ + { + type: "boolean", + multiple: false, + description: "output usage information", + path: "help", + }, + ], + description: "Output usage information", + simpleType: "boolean", + multiple: false, + }, +}; From b417cced5a31e6e2780a1344135827bca6cac3f9 Mon Sep 17 00:00:00 2001 From: Arnav Date: Mon, 8 Apr 2024 02:01:14 +0530 Subject: [PATCH 14/14] fix: removed uneccessary stuff and moved file to bin directory --- package.json | 2 +- .../webpack-cli/bin/bundle-analyzer-flags.js | 0 packages/webpack-cli/src/webpack-cli.ts | 24 ++++++++++--------- 3 files changed, 14 insertions(+), 12 deletions(-) rename cli-flags.js => packages/webpack-cli/bin/bundle-analyzer-flags.js (100%) diff --git a/package.json b/package.json index d6dfa4790c3..0077f648e6e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "webpack-cli-monorepo", "description": "CLI for webpack & friends", "license": "MIT", - "private": true, + "private": true, "repository": { "type": "git", "url": "https://github.com/webpack/webpack-cli.git" diff --git a/cli-flags.js b/packages/webpack-cli/bin/bundle-analyzer-flags.js similarity index 100% rename from cli-flags.js rename to packages/webpack-cli/bin/bundle-analyzer-flags.js diff --git a/packages/webpack-cli/src/webpack-cli.ts b/packages/webpack-cli/src/webpack-cli.ts index 1d45064dc15..575dfdd63f8 100644 --- a/packages/webpack-cli/src/webpack-cli.ts +++ b/packages/webpack-cli/src/webpack-cli.ts @@ -91,6 +91,7 @@ class WebpackCLI implements IWebpackCLI { constructor() { this.colors = this.createColors(); this.logger = this.getLogger(); + // Initialize program this.program = program; this.program.name("webpack"); @@ -971,30 +972,31 @@ class WebpackCLI implements IWebpackCLI { multiple: false, description: "Sets process.env.NODE_ENV to the specified value.", helpLevel: "minimum", - }, // Adding more plugins + }, { - name: "analyze", + name: "define-process-env-node-env", configs: [ { - type: "enum", - values: [true], + type: "string", }, ], multiple: false, - description: "It invokes webpack-bundle-analyzer plugin to get bundle information.", - helpLevel: "minimum", + description: + "Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`).", + helpLevel: "verbose", }, + { - name: "define-process-env-node-env", + name: "analyze", configs: [ { - type: "string", + type: "enum", + values: [true], }, ], multiple: false, - description: - "Sets process.env.NODE_ENV to the specified value. (Currently an alias for `--node-env`).", - helpLevel: "verbose", + description: "It invokes webpack-bundle-analyzer plugin to get bundle information.", + helpLevel: "minimum", }, { name: "progress",