{"id":25344391,"url":"https://github.com/m2sd/typoscript-webpack-plugin","last_synced_at":"2025-10-29T13:31:29.040Z","repository":{"id":33183829,"uuid":"154039928","full_name":"m2sd/typoscript-webpack-plugin","owner":"m2sd","description":"⛔️ DEPRECATED: A simple plugin to generate typoscript statements to include generated assets","archived":false,"fork":false,"pushed_at":"2023-01-07T02:33:17.000Z","size":1583,"stargazers_count":1,"open_issues_count":16,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-03T12:48:36.454Z","etag":null,"topics":["chunk","deprecated","typo3","typoscript","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m2sd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-21T18:33:22.000Z","updated_at":"2020-07-14T05:52:46.000Z","dependencies_parsed_at":"2023-01-14T23:49:14.608Z","dependency_job_id":null,"html_url":"https://github.com/m2sd/typoscript-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m2sd%2Ftyposcript-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m2sd%2Ftyposcript-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m2sd%2Ftyposcript-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m2sd%2Ftyposcript-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m2sd","download_url":"https://codeload.github.com/m2sd/typoscript-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238813381,"owners_count":19534956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chunk","deprecated","typo3","typoscript","webpack","webpack-plugin"],"created_at":"2025-02-14T11:27:58.987Z","updated_at":"2025-10-29T13:31:28.616Z","avatar_url":"https://github.com/m2sd.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DEPRECATED: typoscript-webpack-plugin\n\nThis package will no longer receive updates, apart from dependency updates.\n\nPlease consider using Sebastian Schreiber's awesome [Typo3 Encore Extension](https://github.com/sabbelasichon/typo3_encore).  \nIn terms of functionality, it provides everything this plugin does and quite a bit more and it is much more flexible and reliable.\n\n## Description\n\nGenerate a typoscript file for webpack generated assets.\nI am rather new to webpack plugins so suggestions and pull requests are very welcome.\nAnd of course you are welcome to fork.\n\n## Installation\n\nI suggest installing as dependency rather then as devDependency as that is normally advisable for frontend projects.\n(In the end it does not make that much of a difference as you are unlikely to install your dependencies with the `NODE_ENV` set to production,\nin which case though devDependencies are skipped)\n\n```bash\nnpm i -S typoscript-webpack-plugin\n```\n\nor\n\n```bash\nyarn add typoscript-webpack-plugin\n```\n\n`webpack` is under peerDependencies so you'll have to install it yourself, but given that you're looking for plugins I'd surmise you already have it installed.\n\n## Usage\n\n\u003etl;dr: Include it last in your webpack config\n\nIn your webpack config, Include it after any plugins that trigger on the `emit` hook and modify files of the compilation chunks.\nTo be sure, just include it last, as it only reads basic settings of the compilation chunks (namely `id`, `name` and `files`) and adds one or two files (depending on whether or not the [`loading` option](#loading-option) is used) to the compilation assets.\n\n```javascript\n// ...\nconst TypoScriptPlugin = require(\"typoscript-webpack-plugin\");\n// ...\n\nmodule.exports = {\n  // ...\n  plugins: [\n      // ... (other plugins)\n      new TypoScriptPlugin(),\n  ]\n  // ...\n}\n```\n\nThis will generate a file `WebpackAssets.typoscript` in the same folder where `package.json` resides.\n`WebpackAssets.typoscript` will contain the following code:\n\n```typo3_typoscript\npage {\nincludeJSFooter {\nwebpack_chunkNameOrId = /fileadmin/Resources/Public/path-from-webpack-settings/filename.js\n}\n# if you use mini-css-extract-plugin\nincludeCSS {\nwebpack_chunkNameOrId = /fileadmin/Resources/Public/path-from-webpack-settings/filename.css\n}\n}\n```\n\nFor more information about TypoScript and Typo3 please consult its [documentation](https://docs.typo3.org/).\n\n## Configuration\n\nThe plugin tries to define sensible defaults, but as there are vastly different implementation styles out there,\nI tried to make it as customizable as possible (for the limited functionality it has).\nIf further customization is needed please don't shy away from creating an issue.\n\n### Global options\n\n| option                          | type                              | description                                                                                                                  | default                                                                                      |\n| ------------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| `filename`                      | `string`                          | The name of the generated TypoScript file                                                                                    | `'WebpackAssets.typoscript'`                                                                 |\n| `outputPath`                    | `string`                          | The absolute path to where the typoscript file will be generated                                                             | takes the folder from `module.parent.filename`, i.e. the folder where `package.json` resides |\n| `typoScriptPublicPath`          | `string`                          | This is the path which generated assets will be prefixed with in the typoscript file                                         | `'/fileadmin/Resources/Public/'`                                                             |\n| `typoScriptRootPath`            | `string`                          | The main wrapper for generated lines in the typoscript file                                                                  | `'page'`                                                                                     |\n| `typoScriptIncludeTypeDefaults` | `Object` or `string`              | The default wrappers for generated lines per chunk and file extension (can be overwritten by chunk configuration, see below) | `{js: 'includeJSFooter', css: 'includeCSS'}`                                                 |\n| `typoScriptAdditionalDefaults`  | `Object`, `Array` or `string`     | The default typoscript to be appended to includes (can be overwritten by chunk configuration, see below)                     | `null`                                                                                       |\n| `chunks`                        | `Array` of `Object`s or `string`s | Configurations for specific chunks, if `null` all chunks will be included (see below)                                        | `null`                                                                                       |\n| `loading`                       | `Object`, `string` or `boolean`   | Generate a loading animation to be displayed until the resources are loaded                                                  | `false`                                                                                      |\n\n#### `typoScriptIncludeTypeDefaults`\n\nThe option has three keys:\n\n* `all` will be used for all file extensions\n* `js` will be used for .js file extensions\n* `css` will be used for .css file extensions\n\n`all` will be used in **ADDITION** to the specific wrapper, i.e. if, for example, `all` and `js` are specified the generated lines will be included twice.\nIf a `string` is provided it will be converted to an `Object` of the form `{all: \u003cvalue\u003e}`\n\n#### `typoScriptAdditionalDefaults`\n\nAs with [`typoScriptIncludeTypeDefaults`](#typoscriptincludetypedefaults), `typoScriptAdditionalDefaults` has three keys and the same rules apply.\nThe notable difference is that each key is an `Array` of typoscript lines to be appended to the include statement,\nwhich means the include statement will not be repeated for `all`, it will merely be augmented with more typoscript code.\n\n`all` will be included before the extension specific typoscript and after the typoscirpt for [defered resources](#defered-resources) provided by the `loading` option.\n\nIf a `string` is provided it is converted to an `Object` of the form `{all: [\u003cvalue\u003e]`.\nIf an `Array` is provided it is converted to an `Object` of the form `{all: \u003cvalue\u003e}`.\nIf a `string` is provided for any key in the `Object` it is converted to an `Array` containing only that string, e.g. `{js: 'string'}` =\u003e `{js: ['string']}`\n\nFor an example see the [`additionalTyposcript`](#additionaltyposcript) specification below.\n\n#### `chunks`\n\nSee [Chunk option](#chunk-option).\n\n#### `loading`\n\nSee [Loading option](#loading-option).\n\n### Chunk option\n\nIf the `chunks` option is defined, only chunks that are specified are considered by the code generation.\nChunks can be specified multiple times (with different settings), which will result in a corresponding number of sets of generated lines from the same chunk.\nThe `chunks` option is an `Array` containing `string`s (specifying a chunk name) or `Object`s with the following properties:\n\n| option                 | type                          | description                                                                                                                       |\n| ---------------------- | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |\n| `name`                 | `string`                      | The name of the chunk                                                                                                             |\n| `id`                   | `int`                         | The id of the chunk (will take precedence over `name`)                                                                            |\n| `customName`           | `string`                      | A custom name to be used for the include statement                                                                                |\n| `includeTypes`         | `Object` or `string`          | The wrappers for generated lines per file extension, defaults are set by the global `typoScriptIncludeTypeDefaults` option        |\n| `additionalTypoScript` | `Object`, `Array` or `string` | Additional typoscript lines to append to include statements, defaults are set by the global `typoScriptAdditionalDefaults` option |\n\n#### `includeTypes`\n\nSame rules apply as in the [`typoScriptIncludeTypeDefaults` global option](#typoscriptincludetypedefaults).\n`includeTypes` settings **overwrite** defaults defined in the global `typoScriptIncludeTypeDefaults` option.\n\n#### `additionalTypoScript`\n\nSame rules apply as in the [`typoScriptAdditionalDefaults` global option](#typoscriptadditionaldefaults).\n`additionalTypoScript` settings **extend** defaults defined in the global `typoScriptAdditionalDefaults` option.\n\n**Example plugin configuration with chunk:**\n\n```javascript\nmodule.exports = {\n    //...\n    plugins: [\n        //...\n        new TypoScriptPlugin({\n            chunks: [\n                {\n                    name: 'main',\n                    additionalTypoScript: [\n                        'if.value = someValue',\n                        'if.equals.data = GP:someGETVar'\n                    ]\n                }\n            ]\n        })\n    ]\n    //...\n}\n```\n\n**Resulting Typoscript:**\n\n```typo3_typoscript\npage {\nincludeJSFooter {\nwebpack_main = /fileadmin/Resources/Public/Js/main.js\nwebpack_main.if.value = someValue\nwebpack_main.if.equals.data = GP:someGETVar\n}\n# if mini-css-extract-plugin is used\nincludeCSS {\nwebpack_main = /fileadmin/Resources/Public/Css/main.css\nwebpack_main.if.value = someValue\nwebpack_main.if.equals.data = GP:someGETVar\n}\n}\n```\n\n### Loading option\n\nThe loading option can either be a `boolean` a `string` or an `Object`.\n\nIf the a `boolean` value of `true` is given, then loading will be enabled with the default settings:\n\n```javascript\n{\n    type: 'default',\n    background: '#2c3e50'\n}\n```\n\nIf a `string` is given, then it will be interpreted as identifier for one of the predefined spinners.\nThe spinners are ported from the awesome [Spinkit](http://tobiasahlin.com/spinkit/) project. You can use its demo page to preview the spinners.\n\nThe corresponding `string` keys in the order they are displayed on the demo page are:\n\n1. `'rectangle'`\n2. `'circle-pulse'`\n3. `'rectangle-line'`\n4. `'rectangle-chase'`\n5. `'circle'`\n6. `'circle-chase'`\n7. `'circle-line'`\n8. `'circle-spinner'`\n9. `'rectangle-pulse'`\n10. `'default'`\n11. `'rectangle-spinner'`\n\nFor more fine grained control you can specify an `Object` with the following properties:\n\n| option         | type     | description                                                                                                                                                 | default     |\n| -------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `type`         | `string` | Specifies the subfolder from which to load spinner files. If `customSource` is specified this is optional.                                                  | `'default'` |\n| `background`   | `string` | Specifies a hex value for the background color of the spinner overlay.                                                                                      | `'#2c3e50'` |\n| `customSource` | `string` | Specifies an absolute path to a custom root folder from which to load spinners. If `type` is omitted the resources will be loaded directly from the folder. | `null`      |\n\nTo define a custom spinner the selected folder (either `customSource` or `customSource` + `type`) must contain two files:\n\n* `style.css`\n* `template.html`\n\n**Hint:** Check out the [`loading`](loading) folder for an example.\n\n### Defered resources\n\nIf loading is enabled all resources will be loaded asynchronously.  \nTo achieve this additional typoscript lines are prepended to the generated includes.\n\n#### CSS Files\n\n```plain\nallWrap = \u003cnoscript class=\"webpack-plugin-defer\"\u003e|\u003c/noscript\u003e\n```\n\nTo avoid asynchronous loading just provide a typoscript line deleting the setting through the appropiate option.\n\nFor all CSS files\n\n```javascript\n{\n    typoScriptAdditionalDefaults: {\n        css: 'allWrap \u003e'\n    }\n}\n```\n\nFor CSS generated by a specific chunk\n\n```javascript\n{\n    chunks: {\n        specific: {\n            css: 'allWrap \u003e'\n        }\n    }\n}\n```\n\n**Hint:** You can make use of the asynchronous loading mechanism provided by this plugin even for static CSS files. Just wrap the `\u003clink /\u003e` tag in `\u003cnoscript class=\"webpack-plugin-defer\" /\u003e`\n\n#### JS Files\n\n```plain\ndefer = 1\nasync = 1\n```\n\nTo avoid asynchronous loading just provide the typoscript lines deleting the settings through the appropiate option:\n\nFor all JS files\n\n```javascript\n{\n    typoScriptAdditionalDefaults: {\n        js: [\n            'defer \u003e',\n            'async \u003e'\n        ]\n    }\n}\n```\n\nFor JS generated by a specific chunk\n\n```javascript\n{\n    chunks: {\n        specific: {\n            js: [\n                'defer \u003e',\n                'async \u003e',\n            ]\n        }\n    }\n}\n```\n\n## Full Typo3 extension example\n\n**DISCLAIMER:** The typoscript conditions featured in this example are not actually tested as they serve a purely demonstrative purpose here.\nThe example assumes an [extension](https://docs.typo3.org/typo3cms/ExtbaseFluidBook/Index.html#start) with the following directory structure:\n\n```plain\nmy_awesome_typo3_extension\n|-- (other extension folders, e.g. Classes)\n|-- Configuration\n|   |-- (other config folders, e.g. TCA)\n|   \\-- TypoScript\n|       |-- setup.txt\n|       |-- constants.txt\n|       \\-- Config\n|           \\-- CustomAssetFilename.t3s (generated by plugin)\n|-- Resources\n|   |-- Private\n|   |   |-- (other private resources, e.g. Templates)\n|   |   \\-- Assets\n|   |       |-- loading\n|   |       |   |-- customType1\n|   |       |   |   |-- style.css\n|   |       |   |   \\-- template.html\n|   |       |   \\-- customType2\n|   |       |       |-- style.css\n|   |       |       \\-- template.html\n|   |       \\-- src (webpack sources)\n|   \\-- Public\n|       |-- (other public resources, e.g. Js, Icons, ...)\n|       \\-- Generated (generated by webpack)\n|-- (other root files, e.g. ext_emconf.php, ext_localconf.php, ...)\n|-- package.json\n\\-- webpack.config.js\n```\n\n### `my_awesome_typo3_extension/Configuration/TypoScript/setup.txt`\n\n```typo3_typoscript\n# init page object\ncustomPageType = PAGE\ncustomPageType.pageNum = 100\n# include generated assets\n\u003cINCLUDE_TYPOSCRIPT: source=\"FILE:EXT:my_awesome_typo3_extension/Configuration/TypoScript/Config/CustomAssetFilename.t3s\"\u003e\n\n# ... (more typoscript setup)\n```\n\n### `my_awesome_typo3_extension/Configuration/TypoScript/constants.txt`\n\n```typo3_typoscript\nplugin.tx_myawesometypo3extension {\n    # cat=myAwesomeTypo3Extension/enable/a1; type=boolean; Enable additional Assets:If set additional assets will be loaded\n    include_additional = 0\n    # cat=myAwesomeTypo3Extension/enable/a2; type=boolean; Force additional JS:If set additional javascript will always be loaded\n    force_js = 0\n    # cat=myAwesomeTypo3Extension/enable/a3; type=boolean; Enable additional CSS:The implementation of this setting is a little contrived to show off webpack plugin configuration\n    include_css = 0\n}\n```\n\n### `my_awesome_typo3_extension/webpack.config.js`\n\n```javascript\n'use strict';\n\nconst path = require('path');\n// ... (other imports)\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst TypoScriptPlugin = require('typoscript-webpack-plugin');\n\nmodule.exports = {\n    entry: {\n        main: path.join(__dirname, 'Resources/Private/Assets/src/index.js'),\n        backendLayout: path.join(__dirname, 'Resources/Private/Assets/src/backendLayout.js'),\n        additional: path.join(__dirname, 'Resources/Private/Assets/src/additional.js')\n    },\n    output: {\n        path: path.join(__dirname, 'Resources/Public/Generated/'),\n        filename: 'Js/[name].js'\n    },\n    plugins: [\n        // ... (other plugins)\n        new MiniCssExtractPlugin({\n            filename: 'Css/[name].css'\n        }),\n        new TypoScriptPlugin({\n            filename: 'CustomAssetFilename.t3s',\n            outputPath: path.join(__dirname, 'Configuration/TypoScript/Config/'),\n            loading: {\n                customSource: path.join(__dirname, 'Resources/Private/Assets/loading/'),\n                type: 'customType1',\n                background: '#3f3f3f'\n            },\n            typoScriptRootPath: 'customPageType',\n            typoScriptPublicPath: 'EXT:my_awesome_typo3_extension/Resources/Public/Generated/',\n            typoScriptAdditionalDefaults: {\n                js: [\n                    'async \u003e',\n                    'defer \u003e'\n                ]\n            },\n            chunks: [\n                'main',\n                {\n                    name: 'backendLayout',\n                    customName: 'customLayoutPage',\n                    includeTypes: {js: 'includeJS'},\n                    additionalTypoScript: [\n                        'if.value = pagets__custom_layout',\n                        'if.equals.data = levelfield:-2,backend_layout_next_level,slide',\n                        'if.equals.override.field = backend_layout'\n                    ]\n                },\n                {\n                    name: 'additional',\n                    additionalTypoScript: {\n                        all: 'if.isTrue.value = {$plugin.tx_myawesometypo3extension.include_additional}',\n                        js: 'if.isTrue.override = {$plugin.tx_myawesometypo3extension.force_js}',\n                        css: [\n                            'if.isFalse.value = {$plugin.tx_myawesometypo3extension.exclude_css}',\n                            'if.isFalse.negate = 1',\n                            'allWrap \u003e'\n                        ]\n                    }\n                }\n            ]\n        })\n    ],\n    module: {\n        rules: [\n            // ... (loader configuration)\n        ]\n    },\n    // ... (other configs)\n}\n```\n\n### Result\n\nRunning a webpack build will result in a file named `CustomAssetFilename.t3s`\nin the directory `my_awesome_typo3_extension/Configuration/TypoScript/Config/`\nwith the following contents:\n\n### `my_awesome_typo3_extension/Configuration/TypoScript/Config/CustomAssetFilename.t3s`\n\n```typo3_typoscript\ncustomPageType {\nincludeCSS {\nwebpack_main = EXT:my_awesome_typo3_extension/Resources/Public/Generated/Css/main.css\nwebpack_main.allWrap = \u003cnoscript class=\"webpack-plugin-defer\"\u003e|\u003c/noscript\u003e\n}\nincludeJSFooter {\nwebpack_main = EXT:my_awesome_typo3_extension/Resources/Public/Generated/Js/main.js\nwebpack_main.defer = 1\nwebpack_main.async = 1\nwebpack_main.defer \u003e\nwebpack_main.async \u003e\n}\nincludeCSS {\ncustomLayoutPage = EXT:my_awesome_typo3_extension/Resources/Public/Generated/Css/backendLayout.css\ncustomLayoutPage.allWrap = \u003cnoscript class=\"webpack-plugin-defer\"\u003e|\u003c/noscript\u003e\ncustomLayoutPage.if.value = pagets__custom_layout\ncustomLayoutPage.if.equals.data = levelfield:-2,backend_layout_next_level,slide\ncustomLayoutPage.if.equals.override.field = backend_layout\n}\nincludeJS {\ncustomLayoutPage = EXT:my_awesome_typo3_extension/Resources/Public/Generated/Js/backendLayout.js\ncustomLayoutPage.defer = 1\ncustomLayoutPage.async = 1\ncustomLayoutPage.defer \u003e\ncustomLayoutPage.async \u003e\ncustomLayoutPage.if.value = pagets__custom_layout\ncustomLayoutPage.if.equals.data = levelfield:-2,backend_layout_next_level,slide\ncustomLayoutPage.if.equals.override.field = backend_layout\n}\nincludeCSS {\nwebpack_additional = EXT:my_awesome_typo3_extension/Resources/Public/Generated/Css/additional.css\nwebpack_additional.allWrap = \u003cnoscript class=\"webpack-plugin-defer\"\u003e|\u003c/noscript\u003e\nwebpack_additional.if.isTrue.value = {$plugin.tx_myawesometypo3extension.include_additional}\nwebpack_additional.if.isFalse.value = {$plugin.tx_myawesometypo3extension.include_css}\nwebpack_additional.if.isFalse.negate = 1\nwebpack_additional.allWrap \u003e\n}\nincludeJSFooter {\nwebpack_additional = EXT:my_awesome_typo3_extension/Resources/Public/Generated/Js/additional.js\nwebpack_additional.async = 1\nwebpack_additional.defer = 1\nwebpack_additional.async \u003e\nwebpack_additional.defer \u003e\nwebpack_additional.if.isTrue.value = {$plugin.tx_myawesometypo3extension.include_additional}\nwebpack_additional.if.isTrue.override = {$plugin.tx_myawesometypo3extension.force_js}\n}\nincludeJSFooterlibs {\nwebpack_loading = /webpack-loading.min.js\nwebpack_loading.excludeFromConcatenation = 1\nwebpack_loading.async = 1\nwebpack_loading.defer = 1\n}\nheaderData {\n11389465 = TEXT\n11389465.value(\n\u003cstyle type=\"text/css\"\u003e\n    # contents from my_awesome_typo3_extension/Resources/Private/Assets/loading/CustomType1/style.css\n\u003c/style\u003e\n)\n}\nfooterData {\n11389465 = TEXT\n11389465.value(\n    # contents from my_awesome_typo3_extension/Resources/Private/Assets/loading/CustomType1/template.html\n)\n}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm2sd%2Ftyposcript-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm2sd%2Ftyposcript-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm2sd%2Ftyposcript-webpack-plugin/lists"}