Differences

This shows you the differences between two versions of the page.

--- webpack-lit-scss [2022/03/26 21:30] – admin
+++ webpack-lit-scss [2022/03/26 22:29] – admin
@@ Line 1: / Line 1: @@
 ====== Lit using Scss ======
-<code json package.json>
+<code javascript package.json>
 {
-  "name": "vereine",
+  "name": "club",
   "version": "1.0.0",
   "main": "index.js",
@@ Line 11: / Line 11: @@
     "watch": "./node_modules/.bin/webpack --watch --progress --mode development",
     "build:development": "./node_modules/.bin/webpack -c webpack.config.js --progress --mode development",
-    "build:production": "./node_modules/.bin/webpack  -c webpack.config.js --progress --mode production",
+    "build:production": "./node_modules/.bin/webpack  -c webpack.config.js --progress --mode production"
-    "test:server": "TYPO3_CONTEXT=Development/Test php -S 127.0.0.1:8000 -t public/",
-    "test:db:import": "touch var/typo3-testing.sqlite && rm var/typo3-testing.sqlite && sqlite3 var/typo3-testing.sqlite < tests/_data/typo3-testing.sql",
-    "test:db:export": "sqlite3 var/typo3-testing.sqlite .dump > tests/_data/typo3-testing.sql",
-    "runner:assets": "gitlab-runner exec docker \"build assets\" --docker-volumes `pwd`:/builds/project-0 --env GIT_STRATEGY=\"none\"",
-    "runner:tests": "gitlab-runner exec docker \"codeception\" --docker-volumes `pwd`:/builds/project-0 --env GIT_STRATEGY=\"none\""
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.1.0",
     "autoprefixer": "^10.4.4",
-    "bootstrap": "5.1.3",
-    "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",
     "cssnano": "^5.1.4",
-    "eslint-plugin-prettier": "^4.0.0",
     "extract-loader": "^5.1.0",
     "file-loader": "^6.2.0",
     "lit": "^2.2.1",
     "lit-scss-loader": "^1.1.0",
-    "nprogress": "^0.2.0",
-    "o9n": "^2.1.1",
     "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.0",
-    "prettier-webpack-plugin": "^1.2.0",
     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
-    "seamless-scroll-polyfill": "^2.1.8",
-    "smoothscroll-polyfill": "^0.4.4",
-    "tiny-slider": "^2.9.4",
     "ts-loader": "^9.2.8",
     "typescript": "^4.6.2",
@@ Line 52: / Line 36: @@
 </code>
+<code javascript webpack.config.js>
+const path = require('path')
+module.exports = (env, argv) => {
+  return {
+    mode: 'production',
+    entry: {
+      'app': './Assets/TypeScript/app.ts',
+    },
+    output: {
+      path: path.resolve(__dirname, 'packages/tgo_core/Resources/Public/'),
+      filename: 'JavaScript/[name].js',
+      publicPath: '/typo3conf/ext/tgo_core/Resources/Public/'
+    },
+    watchOptions: {
+      ignored: ['node_modules']
+    },
+    plugins: [],
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        // Process files in TypeScript/Components/Scss/*
+        // to be used in each web component
+        {
+          test: /Components\/Scss\/(.*)(\.css|\.s(c|a)ss$)/i,
+          use: [{
+            loader: 'lit-scss-loader',
+            options: {
+              minify: true, // defaults to false
+            },
+          }, 'extract-loader', 'css-loader', 'sass-loader'],
+        },
+        // Process files in Assets/Scss/* and bundle as app.css
+        {
+          test: /Assets\/Scss\/(.*)(\.css|\.s(c|a)ss$)/i,
+          use: [
+            {
+              loader: 'file-loader',
+              options: {
+                name: '[name].css',
+                outputPath: './Css/'
+              }
+            },
+            { loader: 'extract-loader' },
+            { loader: 'css-loader' },
+            { loader: 'postcss-loader' },
+            {
+              loader: 'sass-loader',
+              options: {
+                additionalData: "$mode: " + argv.mode + ";",
+              }
+            },
+          ]
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+  }
+};
+</code>
+<code javascript tsconfig,json>
+{
+  "compilerOptions": {
+    "target": "es2019",
+    "module": "es2020",
+    "lib": ["es2020", "DOM", "DOM.Iterable"],
+    "declaration": false,
+    "declarationMap": false,
+    "sourceMap": false,
+    "inlineSources": false,
+    // Disable for now, seems to copy *.ts files to
+    // places where they do not belong
+    //"outDir": "./packages/tgo_core/Resources/Public/JavaScript",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ]
+  },
+  "include": [
+    "./TypeScript/**/*.ts",
+    "node_modules/lit-scss-loader/types.d.ts"
+  ],
+  "exclude": []
+}
+</code>

Differences

Page Tools