feat: change template to align more with generators package

change the internal structure of template files

.eslintignore

@@ -11,3 +11,6 @@ test/build/config/error-commonjs/syntax-error.js
 test/build/config/error-mjs/syntax-error.mjs
 test/build/config/error-array/webpack.config.js
 test/configtest/with-config-path/syntax-error.config.js
+
+packages/create-webpack-app
+

packages/create-webpack-app/templates/default/README.md → packages/create-webpack-app/templates/init/default/README.md

@@ -2,13 +2,13 @@
 
 This project has been created using **webpack-cli**, you can now run
 
-```
+```bash
 npm run build
 ```
 
 or
 
-```
+```bash
 yarn build
 ```
 

packages/create-webpack-app/templates/init/default/package.json.hbs

@@ -0,0 +1,8 @@
+{ "version": "1.0.0", "description": "My webpack project", "name": "{{projectName}}", "scripts": {
+"build": "webpack --mode=production --node-env=production", "build:dev": "webpack
+--mode=development", "build:prod": "webpack --mode=production --node-env=production", "watch":
+"webpack --watch",
+{{#if devServer}}
+  "serve": "webpack serve"
+{{/if}}
+} }

packages/create-webpack-app/templates/init/default/src/index.ts

@@ -0,0 +1 @@
+console.log("Hello, World!");

packages/create-webpack-app/templates/init/default/webpack.configjs.hbs

@@ -0,0 +1,75 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli const path = require('path');
+{{#if (htmlWebpackPlugin)}}
+  const HtmlWebpackPlugin = require('html-webpack-plugin');
+{{/if}}
+{{#isEqualToString extractPlugin "No"}}
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+{{/isEqualToString}}
+{{#if (workboxWebpackPlugin)}}
+  const WorkboxWebpackPlugin = require('workbox-webpack-plugin>)
+{{/if}}
+
+const isProduction = process.env.NODE_ENV === 'production';
+{{!-- {{#isEqualToString cssType 'none'}} --}}
+{{!--   {{#if ({{extractPlugin === "Yes"}})}} --}}
+{{!     const stylesHandler = MiniCssExtractPlugin.loader; }}
+{{!--   {{else ({{if extractPlugin  === "Only for Production"}})}} --}}
+{{!     const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader'; }}
+{{!--   {{else}} --}}
+{{!     const stylesHandler = 'style-loader'; }}
+{{!--   {{/if}} --}}
+{{!-- {{/isEqualToString}} --}}
+
+const config = { entry: '{{entry}}', output: { path: path.resolve(__dirname, 'dist'), },{{#if
+  (devServer)
+}}
+  devServer: { open: true, host: 'localhost', },{{/if}}
+plugins: [{{#if (htmlWebpackPlugin)}}
+  new HtmlWebpackPlugin({ template: 'index.html', }),
+{{/if}}
+{{#isEqualToString extractPlugin "Yes"}}
+  new MiniCssExtractPlugin(),
+{{/isEqualToString}}
+// Add your plugins here // Learn more about plugins from
+https://webpack.js.org/configuration/plugins/ ], module: { rules: [{{#isEqualToString
+  langType "ES6"
+}}
+  { test: /\.(js|jsx)$/i, loader: 'babel-loader', },{{/isEqualToString}}
+{{#isEqualToString langType "Typescript"}}
+  { test: /\.(ts|tsx)$/i, loader: 'ts-loader', exclude: ['/node_modules/'], },{{/isEqualToString}}{{#if
+  isCSS
+}}
+  {{#unless isPostCSS}}
+    { test: /\.css$/i, use: [stylesHandler,'css-loader'], },{{/unless}}{{/if}}{{#isEqualToString
+  cssType "SASS"
+}}
+  { test: /\.s[ac]ss$/i, use: [stylesHandler, 'css-loader',
+  {{#if (isPostCSS)}}'postcss-loader', {{/if}}'sass-loader'], },{{/isEqualToString}}{{#isEqualToString
+  cssType "LESS"
+}}
+  { test: /\.less$/i, use: [stylesHandler, 'css-loader',
+  {{#if (isPostCSS)}}'postcss-loader', {{/if}}'less-loader'], },{{/isEqualToString}}{{#isEqualToString
+  cssType "Stylus"
+}}
+  { test: /\.styl$/i, use: [stylesHandler, 'css-loader',
+  {{#if (isPostCSS)}}'postcss-loader', {{/if}}'stylus-loader'], },{{/isEqualToString}}{{#if
+  (isPostCSS)
+}}
+  {{#if (isCSS)}}
+    { test: /\.css$/i, use: [stylesHandler, 'css-loader', 'postcss-loader'], },{{/if}}{{/if}}
+{ test: /\.(eot|svg|ttf|woff|woff2|png|jpg|g#if)$/i, type: 'asset', },
+{{#if (htmlWebpackPlugin)}}
+  { test: /\.html$/i, use: ['html-loader'], },{{/if}}
+
+// Add your rules for custom modules here // Learn more about loaders from
+https://webpack.js.org/loaders/ ], },
+{{#isEqualToString langType "Typescript"}}
+  resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js', '...'], },{{/isEqualToString}}
+}; module.exports = () => { if (isProduction) { config.mode = 'production';
+{{#isEqualToString extractPlugin "Only for Production"}}
+  config.plugins.push(new MiniCssExtractPlugin());
+{{/isEqualToString}}
+{{#if (workboxWebpackPlugin)}}
+  config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
+{{/if}}
+} else { config.mode = 'development'; } return config; };

packages/create-webpack-app/templates/init/react/index.d.ts.tpl

@@ -0,0 +1,8 @@
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.gif";
+declare module "*.svg";
+declare module "*.ttf";
+declare module "*.woff";
+declare module "*.woff2";
+declare module "*.eot";

packages/create-webpack-app/templates/init/react/index.html.tpl

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Webpack + React</title>
+    </head>
+    <body>
+        <div id="root"></div>
+    </body>
+</html>

packages/create-webpack-app/templates/init/react/package.json.tpl

@@ -0,0 +1,12 @@
+{
+  "version": "1.0.0",
+  "description": "My webpack project",
+  "name": "my-webpack-project",
+  "scripts": {
+    "build": "webpack --mode=production --node-env=production",
+    "build:dev": "webpack --mode=development",
+    "build:prod": "webpack --mode=production --node-env=production",
+    "watch": "webpack --watch",
+    "serve": "webpack serve"
+  }
+}

packages/create-webpack-app/templates/init/react/src/App.js.tpl

@@ -0,0 +1,13 @@
+import React from "react";
+import webpackLogo from "./assets/webpack.png";
+
+function App() {
+    return (
+        <div className="container">
+            <h1 className="heading">Welcome to your React App!</h1>
+            <img src={webpackLogo} alt="webpack logo" />
+        </div>
+    );
+}
+
+export default App;

packages/create-webpack-app/templates/init/react/src/App.tsx.tpl

@@ -0,0 +1,13 @@
+import React from "react";
+import webpackLogo from "./assets/webpack.png";
+
+function App() {
+    return (
+        <div className="container">
+            <h1 className="heading">Welcome to your Typescript React App!</h1>
+            <img src={webpackLogo} alt="webpack logo" />
+        </div>
+    );
+}
+
+export default App;

packages/create-webpack-app/templates/init/react/src/index.js.tpl

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+<%  if (cssType == 'CSS only') { %>
+import "./styles/global.css";<% } if (cssType == 'SASS') { %>
+import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
+import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
+import "./styles/global.styl";<% } %>
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

packages/create-webpack-app/templates/init/react/src/index.tsx.tpl

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+<%  if (cssType == 'CSS only') { %>
+import "./styles/global.css";<% } if (cssType == 'SASS') { %>
+import "./styles/global.scss";<% } if (cssType == 'LESS') { %>
+import "./styles/global.less";<% } if (cssType == 'Stylus') { %>
+import "./styles/global.styl";<% } %>
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);

packages/create-webpack-app/templates/init/react/src/styles/global.css.tpl

@@ -0,0 +1,18 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+.heading {
+    font-weight: 300;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}

packages/create-webpack-app/templates/init/react/src/styles/global.less.tpl

@@ -0,0 +1,18 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+.heading {
+    font-weight: 300;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}

packages/create-webpack-app/templates/init/react/src/styles/global.scss.tpl

@@ -0,0 +1,18 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+.heading {
+    font-weight: 300;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}

packages/create-webpack-app/templates/init/react/src/styles/global.styl.tpl

@@ -0,0 +1,18 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+.heading {
+    font-weight: 300;
+}
+
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}

packages/create-webpack-app/templates/init/react/tsconfig.json.tpl

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "allowJs": true,
+    "moduleResolution": "node"
+  },
+  "files": ["src/index.tsx", "index.d.ts"]
+}