knallimall.org knallimall.org

User Tools

Site Tools

webpack-lit-scss

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revisionBoth sides next revision
webpack-lit-scss [2022/03/26 21:30] – adminwebpack-lit-scss [2022/03/26 21:51] – admin
Line 1: Line 1:
 ====== Lit using Scss ====== ====== Lit using Scss ======
  
-<code json package.json>+<code javascript package.json>
 { {
-  "name": "vereine",+  "name": "club",
   "version": "1.0.0",   "version": "1.0.0",
   "main": "index.js",   "main": "index.js",
Line 12: Line 12:
     "build:development": "./node_modules/.bin/webpack -c webpack.config.js --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": {   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.1.0", 
     "autoprefixer": "^10.4.4",     "autoprefixer": "^10.4.4",
-    "bootstrap": "5.1.3", 
     "copy-webpack-plugin": "^10.2.4",     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.1",     "css-loader": "^6.7.1",
Line 30: Line 23:
     "lit": "^2.2.1",     "lit": "^2.2.1",
     "lit-scss-loader": "^1.1.0",     "lit-scss-loader": "^1.1.0",
-    "nprogress": "^0.2.0", 
-    "o9n": "^2.1.1", 
     "postcss-loader": "^6.2.1",     "postcss-loader": "^6.2.1",
     "prettier": "^2.6.0",     "prettier": "^2.6.0",
Line 37: Line 28:
     "sass": "^1.49.9",     "sass": "^1.49.9",
     "sass-loader": "^12.6.0",     "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",     "ts-loader": "^9.2.8",
     "typescript": "^4.6.2",     "typescript": "^4.6.2",
Line 50: Line 38:
 } }
  
 +</code>
 +
 +<code javascript webpack.config.js>
 +const path = require('path')
 +const PrettierPlugin = require('prettier-webpack-plugin')
 +const CopyWebpackPlugin = require('copy-webpack-plugin')
 +
 +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: [
 +      new PrettierPlugin({
 +        printWidth: 80,
 +        tabWidth: 2,
 +        useTabs: false,
 +        semi: true,
 +        encoding: 'utf-8',
 +        extensions: [ ".js", ".scss" ]
 +      }),
 +      new CopyWebpackPlugin({
 +        patterns: [
 +          { from: 'Assets/Image', to: './Image' },
 +          { from: 'Assets/Icons', to: './Icons' },
 +          { from: 'Assets/JavaScript/Backend', to: './JavaScript/Backend' },
 +        ]
 +      })
 +    ],
 +    module: {
 +      rules: [
 +        {
 +          test: /\.tsx?$/,
 +          use: 'ts-loader',
 +          exclude: /node_modules/,
 +        },
 +        {
 +          test: /\.(png|jpe?g|gif|ttf|woff2|otf)$/,
 +          use: [
 +            {
 +              loader: 'file-loader',
 +              options: {
 +                name: '[name].[ext]',
 +                outputPath: 'Font/',
 +              }
 +            }
 +          ]
 +        },
 +        // 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/*
 +        {
 +          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>
  

Page Tools