feat: upgrade to webpack 5

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_size = 4
+indent_style = space

.eslintrc.cjs

@@ -0,0 +1,23 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2022: true,
+        node: true,
+    },
+    extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:solid/typescript'],
+    overrides: [],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: ['@typescript-eslint', 'prettier', 'solid'],
+    rules: {
+        indent: ['error', 4, { SwitchCase: 1 }],
+        'linebreak-style': ['error', 'unix'],
+        quotes: ['error', 'single', { avoidEscape: true }],
+        semi: ['error', 'always'],
+        'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+        '@typescript-eslint/no-var-requires': 'off',
+    },
+};

.gitignore

@@ -1,2 +1,134 @@
-dist/
-node_modules/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.DS_Store
+
+test.*

.postcssrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+    plugins: [require('postcss-preset-env'), require('autoprefixer')],
+};

.prettierrc.yml

@@ -0,0 +1,9 @@
+printWidth: 120
+tabWidth: 4
+semi: true
+singleQuote: true
+trailingComma: 'es5'
+bracketSameLine: false
+arrowParens: 'avoid'
+singleAttributePerLine: true
+proseWrap: never

.stylelintrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+    root: true,
+    extends: ['stylelint-config-standard', 'stylelint-config-standard-scss'],
+    plugins: ['stylelint-prettier'],
+    rules: {
+        'prettier/prettier': true,
+    },
+};

.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.stylelint": "explicit"
+    },
+    "eslint.enable": true,
+    "stylelint.enable": true,
+    "stylelint.configFile": ".stylelintrc.cjs",
+    "stylelint.validate": ["scss"],
+    "scss.validate": true
+}

CHANGELOG.md

@@ -0,0 +1,41 @@
+# Change Log
+
+## Upgraded at April 6th, 2023 (UTC + 8)
+
+-   Upgrade the webpack version from 4 to 5;
+-   Add loaders of style, include `style-loader`, `css-loader`, `postcss-loader` and `sass-loader`;
+-   Split the config for variant environments. You can find `webpack.common.js`, `webpack.dev.js` and `webpack.prod.js` from the folder `./conf`. You can just modify them.
+
+## Upgraded at April 20th, 2023 (UTC + 8)
+
+-   Use `webpack-chain` to rewrite the `webpack.config.js`;
+-   Install `@solidjs/router`;
+
+## Upgraded (I have forgot the time ...)
+
+-   add `eslint`, `stylelint`, `prettier` and gave really basic configs
+
+## Upgraded at June 30th, 2023 (UTC + 8)
+
+-   Add `stylelint` config to `.vscode/settings.json`
+
+## Upgraded at August 5th, 2023 (UTC + 8)
+
+-   Add favicon
+
+## Upgraded at August 12th, 2023 (UTC + 8)
+
+-   Add `css module` support
+
+## Upgraded at August 13th, 2023 (UTC + 8)
+
+-   Upgrade `prettier` to `3.0`
+-   Add `eslint-plugin-solid`
+
+## Upgraded at August 14th, 2023 (UTC + 8)
+
+-   Change package manager from `npm` to `pnpm`
+
+## Fixed at April 30th, 2024 (UTC + 8)
+
+-   add `url-resolve-loader` to resolve the `url()` error in `scss`

README.md

@@ -1,3 +1,26 @@
 # Solid TS Webpack Starter
 
-Really basic starter. This build has a very minimal typescript setup with webpack, and webpack dev server. It does nothing else. No CSS or anything. Use this as a quick way to get started if you intend to build your webpack config yourself.
+Really basic starter. This build has a very minimal typescript setup with webpack, and webpack dev server. It has been added css-preprocessor `sass` and its loader, and some useful loaders and plugins. Use this as a quick way to get started if you intend to build your webpack config yourself.
+
+[中文文档 (并非逐字逐句翻译)](./README_zh-cn.md)
+
+## Clone the repository as your project's template
+
+```sh
+# Using npx
+npx degit https://github.com/My-Project-Template/solid-ts-webpack5.git YOUR_PROJECT_DIRECTORY
+npm i
+
+# Using yarn
+yarn dlx degit https://github.com/My-Project-Template/solid-ts-webpack5.git YOUR_PROJECT_DIRECTORY
+yarn
+
+# Using pnpm
+pnpm dlx degit https://github.com/My-Project-Template/solid-ts-webpack5.git YOUR_PROJECT_DIRECTORY
+pnpm up
+```
+
+## References
+
+-   [changelog](./CHANGELOG.md)
+-   [webpack config](./webpack/webpack.base.js)

README_zh-cn.md

@@ -0,0 +1,20 @@
+# 关于本项目
+
+从官方项目模板`fork`而来，并在这基础上完善了一些，可以开箱即用。预装配置包括:
+
+* `solid @^1.0.0`
+* `solid-router`
+* `sass`
+* `TypeScript @^5.0.0`
+
+更具体的配置可从[Webpack配置文件](./webpack/webpack.base.js)查看, 但不建议直接修改! 
+
+复制为模板:
+
+```sh
+# npm
+$ npx degit https://github.com/My-Project-Template/solid-ts-webpack5.git YOUR_PROJECT
+
+# pnpm
+$ pnpm dlx degit https://github.com/My-Project-Template/solid-ts-webpack5.git YOUR_PROJECT
+```

babel.config.cjs

@@ -0,0 +1,21 @@
+module.exports = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                useBuiltIns: 'usage',
+                corejs: '3.37',
+            },
+        ],
+        'solid',
+        '@babel/preset-typescript',
+    ],
+    plugins: [
+        [
+            'solid-refresh/babel',
+            {
+                bundler: 'webpack5', // or "rspack-esm"
+            },
+        ],
+    ],
+};

html/index.htm

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="<%= htmlWebpackPlugin.options.templateParameters.lang %>">
+<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><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>

license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Yueb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.