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..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,4 +1,6 @@ -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"]], 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..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 @@ -1,34 +1,37 @@ // 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 isProduction = process.env.NODE_ENV === 'production'; -<% if (cssType !== 'none') { %> +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; <% } 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(), @@ -40,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 @@ -82,13 +85,13 @@ const config = { ], },<% if (langType == "Typescript") {%> resolve: { - extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], + extensions: [".tsx", ".ts", ".jsx", ".js", "..."], },<% } %> }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -96,7 +99,7 @@ module.exports = () => { 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/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..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 @@ -1,34 +1,37 @@ // 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 isProduction = process.env.NODE_ENV === 'production'; -<% if (cssType !== 'none') { %> +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; <% } 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(), @@ -50,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 @@ -86,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"<% } %>], }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -100,7 +103,7 @@ module.exports = () => { 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/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..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 @@ -1,34 +1,37 @@ // 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";<% } %> -<% if (cssType !== 'none') { %> +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; <% } 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(), @@ -41,7 +44,7 @@ const config = { { test: /\.svelte$/, use: { - loader: 'svelte-loader', + loader: "svelte-loader", options: { emitCss: true, hotReload: true @@ -60,7 +63,7 @@ const config = { },<% } %><% if (langType == "Typescript") { %> { test: /\.ts$/, - loader: 'ts-loader', + loader: "ts-loader", exclude: /node_modules/, options: { appendTsSuffixTo: [/\.svelte$/], @@ -68,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/ @@ -98,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"] }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -114,7 +117,7 @@ module.exports = () => { 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/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..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,36 +1,39 @@ // 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 isProduction = process.env.NODE_ENV === 'production'; +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; <% } 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(), @@ -42,7 +45,7 @@ const config = { rules: [ { test: /\.vue$/, - loader: 'vue-loader' + loader: "vue-loader" },<% if (langType == "ES6") { %> { test: /\.js$/, @@ -56,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/ @@ -95,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"],<% } %> }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; <% if (extractPlugin === "Only for Production") { %> config.plugins.push(new MiniCssExtractPlugin()); <% } %> @@ -109,7 +112,7 @@ module.exports = () => { 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 463fd55904e..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 @@ -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", } `; @@ -66,20 +69,23 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -89,7 +95,7 @@ const config = { rules: [ { test: /\\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, - type: 'asset', + type: "asset", }, @@ -99,13 +105,13 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -127,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", } `; @@ -134,21 +141,24 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -158,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 @@ -172,13 +182,13 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -201,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", } `; @@ -208,22 +219,25 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -233,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 @@ -247,15 +261,15 @@ const config = { }, }; -module.exports = () => { +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; }; @@ -278,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", } `; @@ -285,16 +300,19 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -304,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", }, @@ -318,13 +336,13 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -349,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", } `; @@ -356,26 +375,29 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -385,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 @@ -399,15 +421,15 @@ const config = { }, }; -module.exports = () => { +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; }; @@ -432,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", } `; @@ -439,26 +462,29 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -468,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 @@ -482,15 +508,15 @@ const config = { }, }; -module.exports = () => { +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; }; @@ -513,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", } `; @@ -520,26 +547,29 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -549,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 @@ -563,15 +593,15 @@ const config = { }, }; -module.exports = () => { +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; }; @@ -596,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", } `; @@ -603,26 +634,29 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -632,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 @@ -646,15 +680,15 @@ const config = { }, }; -module.exports = () => { +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; }; @@ -679,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", } `; @@ -686,26 +721,29 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -715,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 @@ -729,15 +767,15 @@ const config = { }, }; -module.exports = () => { +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; }; @@ -762,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", } `; @@ -784,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", } `; @@ -819,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", } `; @@ -826,31 +867,34 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +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'; +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 @@ -870,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 @@ -885,13 +929,13 @@ const config = { alias: { "@": path.resolve(__dirname, "./src/"), }, - extensions: ['.jsx', '.js'], + extensions: [".jsx", ".js"], }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); @@ -899,7 +943,7 @@ module.exports = () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -934,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", } `; @@ -941,31 +986,34 @@ 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'; +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 @@ -976,7 +1024,7 @@ const config = { { test: /\\.svelte$/, use: { - loader: 'svelte-loader', + loader: "svelte-loader", options: { emitCss: true, hotReload: true @@ -995,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/ @@ -1009,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"] }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); @@ -1025,7 +1073,7 @@ module.exports = () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1047,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", } `; @@ -1054,16 +1103,19 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -1073,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", }, @@ -1087,17 +1139,17 @@ const config = { ], }, resolve: { - extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], + extensions: [".tsx", ".ts", ".jsx", ".js", "..."], }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1136,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", } `; @@ -1143,33 +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 -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 isProduction = process.env.NODE_ENV === 'production'; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); +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 @@ -1179,7 +1235,7 @@ const config = { rules: [ { test: /\\.vue$/, - loader: 'vue-loader' + loader: "vue-loader" }, { test: /\\.js$/, @@ -1193,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/ @@ -1210,9 +1266,9 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); @@ -1220,7 +1276,7 @@ module.exports = () => { config.plugins.push(new WorkboxWebpackPlugin.GenerateSW()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1248,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", } `; @@ -1255,21 +1312,24 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +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'; +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 @@ -1279,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", }, @@ -1297,15 +1357,15 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1333,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", } `; @@ -1340,21 +1401,24 @@ 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 isProduction = process.env.NODE_ENV === 'production'; +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'; +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 @@ -1364,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", }, @@ -1378,15 +1442,15 @@ const config = { }, }; -module.exports = () => { +export default () => { if (isProduction) { - config.mode = 'production'; + config.mode = "production"; config.plugins.push(new MiniCssExtractPlugin()); } else { - config.mode = 'development'; + config.mode = "development"; } return config; }; @@ -1411,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", } `; @@ -1428,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", } `;