From 60118cc53133a3989153a47913790e0b7abbd131 Mon Sep 17 00:00:00 2001 From: ThierryRakotomanana Date: Wed, 18 Mar 2026 18:25:41 +0300 Subject: [PATCH 1/4] refactor(template): convert the default template from CMJs to esm --- .../templates/init/default/webpack.config.js.tpl | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl index 378ca0a49c4..c675a62d543 100644 --- a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl @@ -1,10 +1,13 @@ // Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path');<% if (htmlWebpackPlugin) { %> -const HtmlWebpackPlugin = require('html-webpack-plugin');<% } %><% if (extractPlugin !== 'No') { %> -const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (workboxWebpackPlugin) { %> -const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %> +import path from "node:path"; +import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> +import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> +import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; <% if (cssType !== 'none') { %> <% if (extractPlugin === "Yes") { %> @@ -86,7 +89,7 @@ const config = { },<% } %> }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; <% if (extractPlugin === "Only for Production") { %> From 92d8f3fdf911d35687a549b67c8a2b2aaef3c6fc Mon Sep 17 00:00:00 2001 From: ThierryRakotomanana Date: Wed, 18 Mar 2026 23:29:49 +0300 Subject: [PATCH 2/4] test: update snapshots for ESM default config template --- .../__snapshots__/init.test.js.snap.webpack5 | 114 ++++++++++++------ 1 file changed, 75 insertions(+), 39 deletions(-) diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 index 463fd55904e..2a5f99d778c 100644 --- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 +++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 @@ -66,8 +66,11 @@ exports[`create-webpack-app cli should configure WDS as opted 1`] = ` exports[`create-webpack-app cli should configure WDS as opted 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -99,7 +102,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -134,9 +137,12 @@ exports[`create-webpack-app cli should configure html-webpack-plugin as opted 1` exports[`create-webpack-app cli should configure html-webpack-plugin as opted 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -172,7 +178,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -208,10 +214,13 @@ exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -247,7 +256,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -285,8 +294,11 @@ exports[`create-webpack-app cli should generate ES6 project correctly 1`] = ` exports[`create-webpack-app cli should generate ES6 project correctly 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -318,7 +330,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -356,10 +368,13 @@ exports[`create-webpack-app cli should generate default project when nothing is exports[`create-webpack-app cli should generate default project when nothing is passed 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -399,7 +414,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -439,10 +454,13 @@ exports[`create-webpack-app cli should generate default project when nothing is exports[`create-webpack-app cli should generate default project when nothing is passed and handle conflicts 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -482,7 +500,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -520,10 +538,13 @@ exports[`create-webpack-app cli should generate default project when nothing is exports[`create-webpack-app cli should generate default project when nothing is passed and handle conflicts 4`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -563,7 +584,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -603,10 +624,13 @@ exports[`create-webpack-app cli should generate default project when nothing is exports[`create-webpack-app cli should generate default project when nothing is passed and override when content exist 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -646,7 +670,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -686,10 +710,13 @@ exports[`create-webpack-app cli should generate default project when nothing is exports[`create-webpack-app cli should generate default project when nothing is passed and override when content exist 4`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -729,7 +756,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -1054,8 +1081,11 @@ exports[`create-webpack-app cli should generate typescript project correctly 1`] exports[`create-webpack-app cli should generate typescript project correctly 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -1091,7 +1121,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -1255,9 +1285,12 @@ exports[`create-webpack-app cli should use css preprocessor and css with postcss exports[`create-webpack-app cli should use css preprocessor and css with postcss in project when selected 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -1297,7 +1330,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -1340,9 +1373,12 @@ exports[`create-webpack-app cli should use to use css preprocessor with postcss exports[`create-webpack-app cli should use to use css preprocessor with postcss with mini-css-extract-plugin in project when selected 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -1378,7 +1414,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; From 3917e2779cff88d99529ef8f9f2635d810fd13e7 Mon Sep 17 00:00:00 2001 From: ThierryRakotomanana Date: Thu, 19 Mar 2026 14:38:08 +0300 Subject: [PATCH 3/4] refactor: migrate all configurations and templates to ESM & update testcases - Add "type": "module" to package.json - Convert Webpack configs for React, Vue, and Svelte to ESM syntax - Polyfill __dirname/ __filename for ESM compatibility - Fix missing VueLoaderPlugin import in Vue template - Update test cases snapshot --- .../templates/init/default/package.json.tpl | 3 +- .../init/default/postcss.config.js.tpl | 6 +- .../templates/init/react/package.json.tpl | 1 + .../init/react/webpack.config.js.tpl | 13 ++-- .../templates/init/svelte/package.json.tpl | 1 + .../init/svelte/webpack.config.js.tpl | 15 +++-- .../templates/init/vue/package.json.tpl | 1 + .../templates/init/vue/webpack.config.js.tpl | 15 +++-- .../__snapshots__/init.test.js.snap.webpack5 | 64 ++++++++++++++----- 9 files changed, 81 insertions(+), 38 deletions(-) diff --git a/packages/create-webpack-app/templates/init/default/package.json.tpl b/packages/create-webpack-app/templates/init/default/package.json.tpl index f8c86d267b4..625b0b17ccf 100644 --- a/packages/create-webpack-app/templates/init/default/package.json.tpl +++ b/packages/create-webpack-app/templates/init/default/package.json.tpl @@ -1,9 +1,8 @@ { "version": "1.0.0", - "description": "My webpack project", - "name": "webpack-project", + "type": "module", "scripts": { "build": "webpack --mode=production --config-node-env=production", "build:dev": "webpack --mode=development", diff --git a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl index 3fa4289052e..5b3954aa5b0 100644 --- a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl +++ b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl @@ -1,5 +1,7 @@ -module.exports = { +import autoprefixer from 'autoprefixer'; + +export default { // Add you postcss configuration here // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files - plugins: [["autoprefixer"]], + plugins: [['autoprefixer']], }; diff --git a/packages/create-webpack-app/templates/init/react/package.json.tpl b/packages/create-webpack-app/templates/init/react/package.json.tpl index 09d18f23b46..7c30011ce7d 100644 --- a/packages/create-webpack-app/templates/init/react/package.json.tpl +++ b/packages/create-webpack-app/templates/init/react/package.json.tpl @@ -2,6 +2,7 @@ "version": "1.0.0", "description": "My webpack project", "name": "my-webpack-project", + "type": "module", "scripts": { "build": "webpack --mode=production --config-node-env=production", "build:dev": "webpack --mode=development", diff --git a/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl index 68260a12093..2984a2d8fd5 100644 --- a/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl @@ -1,10 +1,13 @@ // Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path');<% if (htmlWebpackPlugin) { %> -const HtmlWebpackPlugin = require('html-webpack-plugin');<% } %><% if (extractPlugin !== 'No') { %> -const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (workboxWebpackPlugin) { %> -const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %> +import path from "node:path"; +import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> +import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> +import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; <% if (cssType !== 'none') { %> <% if (extractPlugin === "Yes") { %> @@ -90,7 +93,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; <% if (extractPlugin === "Only for Production") { %> diff --git a/packages/create-webpack-app/templates/init/svelte/package.json.tpl b/packages/create-webpack-app/templates/init/svelte/package.json.tpl index 09d18f23b46..7c30011ce7d 100644 --- a/packages/create-webpack-app/templates/init/svelte/package.json.tpl +++ b/packages/create-webpack-app/templates/init/svelte/package.json.tpl @@ -2,6 +2,7 @@ "version": "1.0.0", "description": "My webpack project", "name": "my-webpack-project", + "type": "module", "scripts": { "build": "webpack --mode=production --config-node-env=production", "build:dev": "webpack --mode=development", diff --git a/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl index fa13512cce7..fd922db24a8 100644 --- a/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl @@ -1,11 +1,14 @@ // Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path');<% if (htmlWebpackPlugin) { %> -const HtmlWebpackPlugin = require('html-webpack-plugin');<% } %><% if (extractPlugin !== 'No') { %> -const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (workboxWebpackPlugin) { %> -const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %> -const isProduction = process.env.NODE_ENV === 'production'; +import path from "node:path"; +import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> +import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> +import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const isProduction = process.env.NODE_ENV === 'production'; <% if (cssType !== 'none') { %> <% if (extractPlugin === "Yes") { %> const stylesHandler = MiniCssExtractPlugin.loader; @@ -104,7 +107,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; <% if (extractPlugin === "Only for Production") { %> diff --git a/packages/create-webpack-app/templates/init/vue/package.json.tpl b/packages/create-webpack-app/templates/init/vue/package.json.tpl index 09d18f23b46..7c30011ce7d 100644 --- a/packages/create-webpack-app/templates/init/vue/package.json.tpl +++ b/packages/create-webpack-app/templates/init/vue/package.json.tpl @@ -2,6 +2,7 @@ "version": "1.0.0", "description": "My webpack project", "name": "my-webpack-project", + "type": "module", "scripts": { "build": "webpack --mode=production --config-node-env=production", "build:dev": "webpack --mode=development", diff --git a/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl index 0e0c256b669..66da3da73a1 100644 --- a/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl @@ -1,11 +1,14 @@ // Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const { VueLoaderPlugin } = require('vue-loader');<% if (htmlWebpackPlugin) { %> -const HtmlWebpackPlugin = require('html-webpack-plugin');<% } %><% if (extractPlugin !== 'No') { %> -const MiniCssExtractPlugin = require('mini-css-extract-plugin');<% } %><% if (workboxWebpackPlugin) { %> -const WorkboxWebpackPlugin = require('workbox-webpack-plugin');<% } %> +import { VueLoaderPlugin } from 'vue-loader'; +import path from "node:path"; +import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> +import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> +import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; <% if (cssType !== "none") { %> <% if (extractPlugin === "Yes") { %> @@ -99,7 +102,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; <% if (extractPlugin === "Only for Production") { %> diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 index 2a5f99d778c..cbac88765ad 100644 --- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 +++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 @@ -18,6 +18,7 @@ exports[`create-webpack-app cli recognizes '-t' as an alias for '--template' and "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -40,6 +41,7 @@ exports[`create-webpack-app cli should ask question when wrong template is suppl "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -59,6 +61,7 @@ exports[`create-webpack-app cli should configure WDS as opted 1`] = ` "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -130,6 +133,7 @@ exports[`create-webpack-app cli should configure html-webpack-plugin as opted 1` "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -207,6 +211,7 @@ exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -287,6 +292,7 @@ exports[`create-webpack-app cli should generate ES6 project correctly 1`] = ` "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -361,6 +367,7 @@ exports[`create-webpack-app cli should generate default project when nothing is "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -447,6 +454,7 @@ exports[`create-webpack-app cli should generate default project when nothing is "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -531,6 +539,7 @@ exports[`create-webpack-app cli should generate default project when nothing is "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -617,6 +626,7 @@ exports[`create-webpack-app cli should generate default project when nothing is "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -703,6 +713,7 @@ exports[`create-webpack-app cli should generate default project when nothing is "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -789,6 +800,7 @@ exports[`create-webpack-app cli should generate folders if non existing generati "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -811,6 +823,7 @@ exports[`create-webpack-app cli should generate project when generationPath is s "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -846,6 +859,7 @@ exports[`create-webpack-app cli should generate react template with state and ro "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -853,11 +867,14 @@ exports[`create-webpack-app cli should generate react template with state and ro exports[`create-webpack-app cli should generate react template with state and routing support with prompt answers 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -916,7 +933,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -961,6 +978,7 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -968,12 +986,15 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ exports[`create-webpack-app cli should generate svelte template with prompt answers 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); -const isProduction = process.env.NODE_ENV === 'production'; +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +const isProduction = process.env.NODE_ENV === 'production'; const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; @@ -1042,7 +1063,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -1074,6 +1095,7 @@ exports[`create-webpack-app cli should generate typescript project correctly 1`] "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -1166,6 +1188,7 @@ exports[`create-webpack-app cli should generate vue template with store and rout "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -1173,12 +1196,15 @@ exports[`create-webpack-app cli should generate vue template with store and rout exports[`create-webpack-app cli should generate vue template with store and router support on prompt answers 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -const path = require('path'); -const { VueLoaderPlugin } = require('vue-loader'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const WorkboxWebpackPlugin = require('workbox-webpack-plugin'); +import { VueLoaderPlugin } from 'vue-loader'; +import path from "node:path"; +import { fileURLToPath } from "node:url"; +import HtmlWebpackPlugin from 'html-webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); const isProduction = process.env.NODE_ENV === 'production'; @@ -1240,7 +1266,7 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { config.mode = 'production'; @@ -1278,6 +1304,7 @@ exports[`create-webpack-app cli should use css preprocessor and css with postcss "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -1366,6 +1393,7 @@ exports[`create-webpack-app cli should use to use css preprocessor with postcss "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -1447,6 +1475,7 @@ exports[`create-webpack-app cli should work with 'new' alias 1`] = ` "serve": "webpack serve", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; @@ -1464,6 +1493,7 @@ exports[`create-webpack-app cli uses yarn as the package manager when opted 1`] "build:dev": "webpack --mode=development", "watch": "webpack --watch", }, + "type": "module", "version": "1.0.0", } `; From 8b863e0aed5d736d08268b6dac14fd26025ee695 Mon Sep 17 00:00:00 2001 From: ThierryRakotomanana Date: Thu, 19 Mar 2026 15:35:46 +0300 Subject: [PATCH 4/4] refactor(templates): Standardize all templates to use double quotes (") for consistency --- .../init/default/postcss.config.js.tpl | 4 +- .../init/default/webpack.config.js.tpl | 54 +-- .../init/react/webpack.config.js.tpl | 50 +-- .../init/svelte/webpack.config.js.tpl | 54 +-- .../templates/init/vue/webpack.config.js.tpl | 52 +-- .../__snapshots__/init.test.js.snap.webpack5 | 324 +++++++++--------- 6 files changed, 269 insertions(+), 269 deletions(-) diff --git a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl index 5b3954aa5b0..dbcbc93781b 100644 --- a/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl +++ b/packages/create-webpack-app/templates/init/default/postcss.config.js.tpl @@ -1,7 +1,7 @@ -import autoprefixer from 'autoprefixer'; +import autoprefixer from "autoprefixer"; export default { // Add you postcss configuration here // Learn more about it at https://github.com/webpack-contrib/postcss-loader#config-files - plugins: [['autoprefixer']], + plugins: [["autoprefixer"]], }; diff --git a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl index c675a62d543..9a08a008cde 100644 --- a/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/default/webpack.config.js.tpl @@ -2,36 +2,36 @@ import path from "node:path"; import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> -import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> -import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> -import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %> +import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %> const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; -<% if (cssType !== 'none') { %> +const isProduction = process.env.NODE_ENV === "production"; +<% if (cssType !== "none") { %> <% if (extractPlugin === "Yes") { %> const stylesHandler = MiniCssExtractPlugin.loader; <% } else if (extractPlugin === "Only for Production") { %> -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; <% } else { %> -const stylesHandler = 'style-loader'; +const stylesHandler = "style-loader"; <% } %> <% } %> /** @type {import("webpack").Configuration} */ const config = { - entry: '<%= entryPoint %>', + entry: "<%= entryPoint %>", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), },<% if (devServer) { %> devServer: { open: true, - host: 'localhost', + host: "localhost", },<% } %> plugins: [<% if (htmlWebpackPlugin) { %> new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), <% } %><% if (extractPlugin === "Yes") { %> new MiniCssExtractPlugin(), @@ -43,41 +43,41 @@ const config = { rules: [<% if (langType == "ES6") { %> { test: /\.(js|jsx)$/i, - loader: 'babel-loader', + loader: "babel-loader", },<% } %><% if (langType == "Typescript") { %> { test: /\.(ts|tsx)$/i, - loader: 'ts-loader', - exclude: ['/node_modules/'], + loader: "ts-loader", + exclude: ["/node_modules/"], },<% } %><% if (isCSS && !isPostCSS) { %> { test: /\.css$/i, - use: [stylesHandler,'css-loader'], - },<% } %><% if (cssType == 'SASS') { %> + use: [stylesHandler,"css-loader"], + },<% } %><% if (cssType == "SASS") { %> { test: /\.s[ac]ss$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'], - },<% } %><% if (cssType == 'LESS') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"], + },<% } %><% if (cssType == "LESS") { %> { test: /\.less$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'], - },<% } %><% if (cssType == 'Stylus') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"], + },<% } %><% if (cssType == "Stylus") { %> { test: /\.styl$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'], + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"], },<% } %><% if (isPostCSS && isCSS) { %> { test: /\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], },<% } %> { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, %><% if (htmlWebpackPlugin) { %> { test: /\.html$/i, - use: ['html-loader'], + use: ["html-loader"], },<% } %> // Add your rules for custom modules here @@ -85,13 +85,13 @@ const config = { ], },<% if (langType == "Typescript") {%> resolve: { - extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], + extensions: [".tsx", ".ts", ".jsx", ".js", "..."], },<% } %> }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -99,7 +99,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); <% } %> } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; diff --git a/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl index 2984a2d8fd5..512f4dc6b0a 100644 --- a/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/react/webpack.config.js.tpl @@ -2,36 +2,36 @@ import path from "node:path"; import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> -import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> -import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> -import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %> +import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %> const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; -<% if (cssType !== 'none') { %> +const isProduction = process.env.NODE_ENV === "production"; +<% if (cssType !== "none") { %> <% if (extractPlugin === "Yes") { %> const stylesHandler = MiniCssExtractPlugin.loader; <% } else if (extractPlugin === "Only for Production") { %> -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; <% } else { %> -const stylesHandler = 'style-loader'; +const stylesHandler = "style-loader"; <% } %> <% } %> /** @type {import("webpack").Configuration} */ const config = { - entry: '<%= entry %>', + entry: "<%= entry %>", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), },<% if (devServer) { %> devServer: { open: true, - host: 'localhost', + host: "localhost", },<% } %> plugins: [<% if (htmlWebpackPlugin) { %> new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), <% } %><% if (extractPlugin === "Yes") { %> new MiniCssExtractPlugin(), @@ -53,32 +53,32 @@ const config = { },<% } %><% if (langType == "Typescript") { %> { test: /\.(ts|tsx)$/i, - loader: 'ts-loader', - exclude: ['/node_modules/'], + loader: "ts-loader", + exclude: ["/node_modules/"], },<% } %><% if (isCSS && !isPostCSS) { %> { test: /\.css$/i, - use: [stylesHandler,'css-loader'], - },<% } %><% if (cssType == 'SASS') { %> + use: [stylesHandler,"css-loader"], + },<% } %><% if (cssType == "SASS") { %> { test: /\.s[ac]ss$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'], - },<% } %><% if (cssType == 'LESS') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"], + },<% } %><% if (cssType == "LESS") { %> { test: /\.less$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'], - },<% } %><% if (cssType == 'Stylus') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"], + },<% } %><% if (cssType == "Stylus") { %> { test: /\.styl$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'], + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"], },<% } %><% if (isPostCSS && isCSS) { %> { test: /\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], },<% } %> { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, // Add your rules for custom modules here @@ -89,13 +89,13 @@ const config = { alias: { "@": path.resolve(__dirname, "./src/"), }, - extensions: ['.jsx', '.js'<% if (langType === 'Typescript') { %>, '.tsx', '.ts'<% } %>], + extensions: [".jsx", ".js"<% if (langType === "Typescript") { %>, ".tsx", ".ts"<% } %>], }, }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -103,7 +103,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); <% } %> } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; diff --git a/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl index fd922db24a8..ef0fc202556 100644 --- a/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/svelte/webpack.config.js.tpl @@ -2,36 +2,36 @@ import path from "node:path"; import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> -import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> -import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> -import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %> +import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %> const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; -<% if (cssType !== 'none') { %> +const isProduction = process.env.NODE_ENV === "production"; +<% if (cssType !== "none") { %> <% if (extractPlugin === "Yes") { %> const stylesHandler = MiniCssExtractPlugin.loader; <% } else if (extractPlugin === "Only for Production") { %> -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; <% } else { %> -const stylesHandler = 'style-loader'; +const stylesHandler = "style-loader"; <% } %> <% } %> /** @type {import("webpack").Configuration} */ const config = { - entry: '<%= entry %>', + entry: "<%= entry %>", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), },<% if (devServer) { %> devServer: { open: true, - host: 'localhost', + host: "localhost", },<% } %> plugins: [<% if (htmlWebpackPlugin) { %> new HtmlWebpackPlugin({ - template: './index.html', + template: "./index.html", }), <% } %><% if (extractPlugin === "Yes") { %> new MiniCssExtractPlugin(), @@ -44,7 +44,7 @@ const config = { { test: /\.svelte$/, use: { - loader: 'svelte-loader', + loader: "svelte-loader", options: { emitCss: true, hotReload: true @@ -63,7 +63,7 @@ const config = { },<% } %><% if (langType == "Typescript") { %> { test: /\.ts$/, - loader: 'ts-loader', + loader: "ts-loader", exclude: /node_modules/, options: { appendTsSuffixTo: [/\.svelte$/], @@ -71,27 +71,27 @@ const config = { },<% } %><% if (isCSS && !isPostCSS) { %> { test: /\.css$/i, - use: [stylesHandler,'css-loader'], - },<% } %><% if (cssType == 'SASS') { %> + use: [stylesHandler,"css-loader"], + },<% } %><% if (cssType == "SASS") { %> { test: /\.s[ac]ss$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'], - },<% } %><% if (cssType == 'LESS') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"], + },<% } %><% if (cssType == "LESS") { %> { test: /\.less$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'], - },<% } %><% if (cssType == 'Stylus') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"], + },<% } %><% if (cssType == "Stylus") { %> { test: /\.styl$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'], + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"], },<% } %><% if (isPostCSS && isCSS) { %> { test: /\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], },<% } %> { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ @@ -101,15 +101,15 @@ const config = { alias: { "@": path.resolve(__dirname, "./src/"), }, - extensions: ['.mjs', '.js', '.svelte'<% if (langType == "Typescript") {%>, '.ts'<% } %>], - mainFields: ['svelte', 'browser', 'module', 'main'], - conditionNames: ['svelte', 'module', 'browser', 'main', 'default'] + extensions: [".mjs", ".js", ".svelte"<% if (langType == "Typescript") {%>, ".ts"<% } %>], + mainFields: ["svelte", "browser", "module", "main"], + conditionNames: ["svelte", "module", "browser", "main", "default"] }, }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -117,7 +117,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); <% } %> } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; diff --git a/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl b/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl index 66da3da73a1..0d954a2ff67 100644 --- a/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl +++ b/packages/create-webpack-app/templates/init/vue/webpack.config.js.tpl @@ -1,39 +1,39 @@ // Generated using webpack-cli https://github.com/webpack/webpack-cli -import { VueLoaderPlugin } from 'vue-loader'; +import { VueLoaderPlugin } from "vue-loader"; import path from "node:path"; import { fileURLToPath } from "node:url";<% if (htmlWebpackPlugin) { %> -import HtmlWebpackPlugin from 'html-webpack-plugin';<% } %><% if (extractPlugin !== 'No') { %> -import MiniCssExtractPlugin from 'mini-css-extract-plugin';<% } %><% if (workboxWebpackPlugin) { %> -import WorkboxWebpackPlugin from 'workbox-webpack-plugin';<% } %> +import HtmlWebpackPlugin from "html-webpack-plugin";<% } %><% if (extractPlugin !== "No") { %> +import MiniCssExtractPlugin from "mini-css-extract-plugin";<% } %><% if (workboxWebpackPlugin) { %> +import WorkboxWebpackPlugin from "workbox-webpack-plugin";<% } %> const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; <% if (cssType !== "none") { %> <% if (extractPlugin === "Yes") { %> const stylesHandler = MiniCssExtractPlugin.loader; <% } else if (extractPlugin === "Only for Production") { %> -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader"; <% } else { %> -const stylesHandler = 'vue-style-loader'; +const stylesHandler = "vue-style-loader"; <% } %> <% } %> /** @type {import("webpack").Configuration} */ const config = { - entry: '<%= entry %>', + entry: "<%= entry %>", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), },<% if (devServer) { %> devServer: { open: true, - host: 'localhost', + host: "localhost", },<% } %> plugins: [ new VueLoaderPlugin(),<% if (htmlWebpackPlugin) { %> new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), <% } %><% if (extractPlugin === "Yes") { %> new MiniCssExtractPlugin(), @@ -45,7 +45,7 @@ const config = { rules: [ { test: /\.vue$/, - loader: 'vue-loader' + loader: "vue-loader" },<% if (langType == "ES6") { %> { test: /\.js$/, @@ -59,36 +59,36 @@ const config = { },<% } %><% if (langType == "Typescript") { %> { test: /\.(ts|tsx)$/i, - loader: 'ts-loader', + loader: "ts-loader", options: { appendTsSuffixTo: [/\.vue$/], transpileOnly: true, }, - exclude: ['/node_modules/'], + exclude: ["/node_modules/"], },<% } %><% if (isCSS && !isPostCSS) { %> { test: /\.css$/i, - use: [stylesHandler,'css-loader'], - },<% } %><% if (cssType == 'SASS') { %> + use: [stylesHandler,"css-loader"], + },<% } %><% if (cssType == "SASS") { %> { test: /\.s[ac]ss$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'sass-loader'], - },<% } %><% if (cssType == 'LESS') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"sass-loader"], + },<% } %><% if (cssType == "LESS") { %> { test: /\.less$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'less-loader'], - },<% } %><% if (cssType == 'Stylus') { %> + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"less-loader"], + },<% } %><% if (cssType == "Stylus") { %> { test: /\.styl$/i, - use: [stylesHandler, 'css-loader', <% if (isPostCSS) { %>'postcss-loader', <% } %>'stylus-loader'], + use: [stylesHandler, "css-loader", <% if (isPostCSS) { %>"postcss-loader", <% } %>"stylus-loader"], },<% } %><% if (isPostCSS && isCSS) { %> { test: /\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], },<% } %> { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ @@ -98,13 +98,13 @@ const config = { alias: { "@": path.resolve(__dirname, "./src/") },<% if (langType == "Typescript") {%> - extensions: ['.tsx', '.ts', '.js', '.vue', '.json'],<% } %> + extensions: [".tsx", ".ts", ".js", ".vue", ".json"],<% } %> }, }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -112,7 +112,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); <% } %> } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; diff --git a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 index cbac88765ad..b4073ebfa32 100644 --- a/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 +++ b/test/create-webpack-app/init/__snapshots__/init.test.js.snap.webpack5 @@ -74,18 +74,18 @@ import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ // Add your plugins here @@ -95,7 +95,7 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, @@ -107,11 +107,11 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -143,22 +143,22 @@ exports[`create-webpack-app cli should configure html-webpack-plugin as opted 2` import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -168,12 +168,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -184,11 +184,11 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -221,23 +221,23 @@ exports[`create-webpack-app cli should configure workbox-webpack-plugin as opted import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -247,12 +247,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -263,13 +263,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -305,14 +305,14 @@ import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, plugins: [ // Add your plugins here @@ -322,11 +322,11 @@ const config = { rules: [ { test: /\\.(js|jsx)$/i, - loader: 'babel-loader', + loader: "babel-loader", }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, @@ -338,11 +338,11 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -377,27 +377,27 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -407,12 +407,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -423,13 +423,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -464,27 +464,27 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -494,12 +494,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -510,13 +510,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -549,27 +549,27 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -579,12 +579,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -595,13 +595,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -636,27 +636,27 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -666,12 +666,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -682,13 +682,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -723,27 +723,27 @@ exports[`create-webpack-app cli should generate default project when nothing is import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -753,12 +753,12 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, { test: /\\.html$/i, - use: ['html-loader'], + use: ["html-loader"], }, // Add your rules for custom modules here @@ -769,13 +769,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -869,32 +869,32 @@ exports[`create-webpack-app cli should generate react template with state and ro import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import MiniCssExtractPlugin from "mini-css-extract-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.jsx', + entry: "./src/index.jsx", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -914,11 +914,11 @@ const config = { }, { test: /\\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, // Add your rules for custom modules here @@ -929,13 +929,13 @@ const config = { alias: { "@": path.resolve(__dirname, "./src/"), }, - extensions: ['.jsx', '.js'], + extensions: [".jsx", ".js"], }, }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); @@ -943,7 +943,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -988,32 +988,32 @@ exports[`create-webpack-app cli should generate svelte template with prompt answ import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import MiniCssExtractPlugin from "mini-css-extract-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/main.js', + entry: "./src/main.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new HtmlWebpackPlugin({ - template: './index.html', + template: "./index.html", }), // Add your plugins here @@ -1024,7 +1024,7 @@ const config = { { test: /\\.svelte$/, use: { - loader: 'svelte-loader', + loader: "svelte-loader", options: { emitCss: true, hotReload: true @@ -1043,11 +1043,11 @@ const config = { }, { test: /\\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ @@ -1057,15 +1057,15 @@ const config = { alias: { "@": path.resolve(__dirname, "./src/"), }, - extensions: ['.mjs', '.js', '.svelte'], - mainFields: ['svelte', 'browser', 'module', 'main'], - conditionNames: ['svelte', 'module', 'browser', 'main', 'default'] + extensions: [".mjs", ".js", ".svelte"], + mainFields: ["svelte", "browser", "module", "main"], + conditionNames: ["svelte", "module", "browser", "main", "default"] }, }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); @@ -1073,7 +1073,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1108,14 +1108,14 @@ import { fileURLToPath } from "node:url"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.ts', + entry: "./src/index.ts", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, plugins: [ // Add your plugins here @@ -1125,12 +1125,12 @@ const config = { rules: [ { test: /\\.(ts|tsx)$/i, - loader: 'ts-loader', - exclude: ['/node_modules/'], + loader: "ts-loader", + exclude: ["/node_modules/"], }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, @@ -1139,17 +1139,17 @@ const config = { ], }, resolve: { - extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], + extensions: [".tsx", ".ts", ".jsx", ".js", "..."], }, }; export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1196,36 +1196,36 @@ exports[`create-webpack-app cli should generate vue template with store and rout exports[`create-webpack-app cli should generate vue template with store and router support on prompt answers 2`] = ` "// Generated using webpack-cli https://github.com/webpack/webpack-cli -import { VueLoaderPlugin } from 'vue-loader'; +import { VueLoaderPlugin } from "vue-loader"; import path from "node:path"; import { fileURLToPath } from "node:url"; -import HtmlWebpackPlugin from 'html-webpack-plugin'; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; -import WorkboxWebpackPlugin from 'workbox-webpack-plugin'; +import HtmlWebpackPlugin from "html-webpack-plugin"; +import MiniCssExtractPlugin from "mini-css-extract-plugin"; +import WorkboxWebpackPlugin from "workbox-webpack-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "vue-style-loader"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/main.js', + entry: "./src/main.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, devServer: { open: true, - host: 'localhost', + host: "localhost", }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin({ - template: 'index.html', + template: "index.html", }), // Add your plugins here @@ -1235,7 +1235,7 @@ const config = { rules: [ { test: /\\.vue$/, - loader: 'vue-loader' + loader: "vue-loader" }, { test: /\\.js$/, @@ -1249,11 +1249,11 @@ const config = { }, { test: /\\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ @@ -1268,7 +1268,7 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); @@ -1276,7 +1276,7 @@ export default () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1314,22 +1314,22 @@ exports[`create-webpack-app cli should use css preprocessor and css with postcss import path from "node:path"; import { fileURLToPath } from "node:url"; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import MiniCssExtractPlugin from "mini-css-extract-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, plugins: [ // Add your plugins here @@ -1339,15 +1339,15 @@ const config = { rules: [ { test: /\\.s[ac]ss$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader', 'sass-loader'], + use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"], }, { test: /\\.css$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader'], + use: [stylesHandler, "css-loader", "postcss-loader"], }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, @@ -1359,13 +1359,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1403,22 +1403,22 @@ exports[`create-webpack-app cli should use to use css preprocessor with postcss import path from "node:path"; import { fileURLToPath } from "node:url"; -import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import MiniCssExtractPlugin from "mini-css-extract-plugin"; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); -const isProduction = process.env.NODE_ENV === 'production'; +const isProduction = process.env.NODE_ENV === "production"; -const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; +const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : "style-loader"; /** @type {import("webpack").Configuration} */ const config = { - entry: './src/index.js', + entry: "./src/index.js", output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, "dist"), }, plugins: [ // Add your plugins here @@ -1428,11 +1428,11 @@ const config = { rules: [ { test: /\\.s[ac]ss$/i, - use: [stylesHandler, 'css-loader', 'postcss-loader', 'sass-loader'], + use: [stylesHandler, "css-loader", "postcss-loader", "sass-loader"], }, { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, @@ -1444,13 +1444,13 @@ const config = { export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; };