{"id":13494013,"url":"https://github.com/hostnet/webpack-bundle","last_synced_at":"2026-01-15T04:04:24.605Z","repository":{"id":56229143,"uuid":"41296415","full_name":"hostnet/webpack-bundle","owner":"hostnet","description":"Allows pre-processing of assets such as less, sass, css etc.","archived":true,"fork":false,"pushed_at":"2020-11-20T07:43:25.000Z","size":351,"stargazers_count":67,"open_issues_count":5,"forks_count":16,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-06-04T22:28:46.241Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","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/hostnet.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2015-08-24T10:09:51.000Z","updated_at":"2024-02-04T19:30:21.000Z","dependencies_parsed_at":"2022-08-15T15:01:05.936Z","dependency_job_id":null,"html_url":"https://github.com/hostnet/webpack-bundle","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/hostnet/webpack-bundle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hostnet%2Fwebpack-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hostnet%2Fwebpack-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hostnet%2Fwebpack-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hostnet%2Fwebpack-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hostnet","download_url":"https://codeload.github.com/hostnet/webpack-bundle/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hostnet%2Fwebpack-bundle/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28420800,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T10:47:48.104Z","status":"ssl_error","status_checked_at":"2026-01-14T10:46:19.031Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T19:01:20.930Z","updated_at":"2026-01-15T04:04:24.590Z","avatar_url":"https://github.com/hostnet.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"**Abandoned**\n\nThis package is abandoned.\nUse alternative tools like:\n\n- [hostnet/asset-bundle](https://github.com/hostnet/asset-bundle)\n- [Webpack Encore](https://symfony.com/doc/4.4/frontend.html)\n\n\n# hostnet/webpack-bundle\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n- [Upgrading to 2.0](#upgrading-to-2.0)\n- [Quick how-to](#quick-how-to)\n- [Twig tag](#twig-tag)\n- [Configuration](#configuration)\n  - [Node](#node)\n    - [Multi-platform configuration](#multi-platform-configuration)\n  - [Bundle configuration](#bundle-configuration)\n    - [Adding app resources to the tracked assets](#adding-app-resources-to-the-tracked-assets)\n  - [Shared dependencies](#shared-dependencies)\n  - [Asset output directories](#asset-output-directories)\n  - [Ideal configuration](#ideal-configuration)\n  - [Compile Timeout](#compile-timeout)\n- [Loaders](#loaders)\n  - [CSS](#css)\n  - [Less](#less)\n  - [Sass](#sass)\n  - [URL](#url)\n  - [TypeScript](#typescript)\n  - [CoffeeScript](#coffeescript)\n- [Plugins](#plugins)\n  - [DefinePlugin](#defineplugin)\n  - [ProvidePlugin](#provideplugin)\n  - [UglifyJS](#uglifyjs)\n\n## Introduction\n\nThis package assumes you already have some basic knowledge about webpack; what it is and what it does for you. If this\nis not the case, please [read this first](http://webpack.github.io/docs/motivation.html). It will only take a minute,\nbut it's worth it.\n\nInstead of having all bundle-specific assets in one location, this package handles assets from __two__ different\nlocations. The reasoning behind this decision is because webpack assets are compiled on the server and shouldn't be\naccessible from the browser.\n\n - `Resources/assets` contains files that are compiled by webpack.\n - `Resources/public` contains assets that are either symlinked or copied to `/\u003cdump_path\u003e/\u003clowercased_bundle_name\u003e/`\n\nBoth of these directories are being watched when running in _debug mode_. When an asset has been added, modified or\ndeleted, compiled sources are updated directly.\n\nThe package comes with two _twig functions_:\n\n - `webpack_asset(url)` : Resolves compiled asset files. E.g.: `webpack_asset('@AppBundle/app.js')` resolves to `Resources/assets/app.js` in AppBundle.\n - `webpack_public(url)`: Resolves dumped public assets from the `Resources/public` directory. Bundle referencing works the same way as in `webpack_asset`.\n\nPlease note that `webpack_asset` returns an array with two keys: `js` and `css`. More info on this in the\n[Quick how-to](#quick-how-to) example.\n\n## Installation\n\nInstall using [composer](https://getcomposer.org/).\n```json\n\"require\" : {\n    \"hostnet/webpack-bundle\" : \"1.*\"\n}\n```\nOnce installed, enable the bundle `Hostnet\\Bundle\\WebpackBundle\\WebpackBundle` in the `AppKernel` class.\n\n\u003e ___Warning___: In order to have the webpack twig tag detect the compiled files, webpack has to be compiled already. Therefore\n\u003e  it's mandatory to run the compile command `webpack:compile` __before__ the cache warmpup.\n\n\n## Upgrading to 2.0\n\nDue to some breaking changes in Twig, webpack-bundle 2.0 was released to be made compatible with the new twig version.\n\nTo ensure a smooth upgrade, please ensure that you have the following in your project:\n\n- PHP 7.1 or higher\n- Symfony 3.3.0 or higher\n- Twig 2.4.0 or higher\n\nThere are no configuration changes made in this version. If your project uses the package versions as mentioned above, \nyou should not run into any issues when upgrading webpack-bundle to 2.0.\n \nThe following additional changes were made in this version:\n\n- Use PHP 7 strict type declaration\n- Use namespaced Twig classes, which are introduced in Twig 2.4 for future compatibility (e.g. `\\Twig\\Environemnt` instead of `\\Twig_Environment`)\n- Enforce code style using `phpcs` and enforcing the extra ruleset specified by Hostnet.\n- The class `CSSLoader` was renamed to `CssLoader` because our code style rules enforce this.\n- Generated file names for inline javascript/css source are now coming from `TokenStream-\u003egetSourceContext()-\u003egetName()` instead of `TokenStream-\u003egetFilename()`. The latter function was removed from Twig.\n- Created FCQN services and added aliases to ensure BC.\n- Made the bundle compatible with Symfony (3.)4 \n\n## Quick how-to\n\n\u003e ___Warning___: the package assumes by default that `node` and `webpack` plus any additional modules are pre-installed\n\u003e on your system. If this is not the case, you need to specify some configuration in your `config.yml` file after\n\u003e enabling the bundle. See [Node Configuration](#node) for more details.\n\nImagine having the following files in your application:\n - `src/AppBundle/Resources/assets/app.js`\n - `src/AppBundle/Resources/assets/image.js`\n - `src/AppBundle/Resources/public/images/logo.png`\n - `src/AppBundle/Resources/views/base.html.twig`\n\nLets start with the twig template.\n```twig\n{# src/AppBundle/Resources/views/base.html.twig #}\n\nThe quick variant:\n\u003cscript src=\"{{ webpack_asset('@AppBundle/app.js').js }}\"\u003e\u003c/script\u003e\n\nThe more maintainable variant: Store the result to a variable for easy access.\n{% set asset = webpack_asset('@AppBundle/app.js') %}\n\n\u003cscript src=\"{{ asset.js }}\"\u003e\u003c/script\u003e\n{% if asset.css is not empty %}\n    \u003clink rel=\"stylesheet\" href=\"{{ asset.css }}\"\u003e\n{% endif %}\n```\n\nUse the twig function `webpack_asset(url)` in your template to specify an\n[entry-point](http://webpack.github.io/docs/configuration.html#entry). In short, an entry-point is an asset that will be\ncompiled and exported to the output path. This path defaults to `%kernel.root_dir%/../web`. The compiled file will be\nnamed `app_bundle.app.js` by default. Both of these settings are configurable.\n\n`webpack_asset` returns an array with two keys: `js` referencing the compiled javascript file and `css` referencing the\ncompiled css file. Beware that the `css` element may be blank if this file doesn't exist. The latter would occur if the\nreferenced javascript file - or its dependencies - doesn't include any CSS-type files.\n\n```javascript\n// src/AppBundle/Resources/assets/app.js\nvar image = require('@AppBundle/image.js');\ndocument.write(image('/bundles/app/images/logo.png'));\n```\nAny webpack asset may use the `require` or `define` functions that come with webpack. Webpack allows for both CommonJS\nand AMD-style loading of files. As you might have noticed, the example above references a bundle by its shorthand name,\n`@AppBundle`. The bundle automatically aliases tracked bundles for you, so you're free to use this method of\nreferencing dependencies throughout the entire application.\n\nThe `logo.png` file, located in the `Resources/public` directory will be symlinked or copied to\n`/\u003cdump_path\u003e/\u003clowercased_bundle_name\u003e` automatically. You should place any file that does not need processing in the\npublic directory to avoid unnecessary load times in debug mode (app_dev).\n\nHere is a simple image module that returns an image HTML-tag as string.\n```javascript\n// src/AppBundle/Resources/assets/image.js\nmodule.exports = function (src) {\n    return '\u003cimg src=\"' + src + '\"\u003e';\n};\n```\n\n## Twig tag\n\nAside from the `webpack_asset` twig function, you can also use the `webpack` tag to specify one or more entry points in\na much more elegant fashion. The syntax of this tag works like this:\n\n```twig\n{% webpack \u003ctype: css|js\u003e \u003clist-of-javascript-files\u003e %}\n    {{ asset }}\n{% endwebpack %}\n```\nOr if you want to have inline code without including a file:\n```twig\n{% webpack \u003ctype: inline\u003e [file-type] %}\n    \u003cjavascript, css, less, scss, ... code\u003e\n{% endwebpack %}\n```\n\nIf you want to include javascript files, simply do this:\n```twig\n{% webpack js\n   '@AppBundle/file1.js'\n   '@AppBundle/file2.js'\n%}\n    \u003cscript src=\"{{ asset }}\"\u003e\u003c/script\u003e\n{% endwebpack %}\n```\nOr the inline variant:\n```twig\n{% webpack inline %}\n\u003cscript type=\"text/javascript\"\u003e\n    console.log(\"Hello world!\");\n\u003c/script\u003e\n{% endwebpack %}\n```\n\nThe same method can be applied for CSS files.\n```twig\n{% webpack css '@AppBundle/file1.js' %}\n    \u003clink rel=\"stylesheet\" href=\"{{ asset }}\"\u003e\n{% endwebpack %}\n```\n\nNote that in the CSS example, we're still referencing javascript files. _This is not a mistake._ Webpack extracts\nreferenced CSS files from javascript files and places them in separate css files - if the bundle\nwas configured to do so. If you want to include an already existing CSS file, just use the regular method of doing so.\nFor more information about CSS file exportation, please refer to the [CSS loader configuration](#css).\n\n\u003e __Warning__: Due to the nature of split point detection, expressions are not parsed! Only strings types are accepted.\n\u003e The reason behind this - as previously mentioned - performance. All twig templates are tokenized on request in debug-\n\u003e mode. Just tokenizing them is a lot faster than actually parsing every single one of them.\n\n### More about the inline variant\n\nAs mentioned in the example above, you may optionally specify a file type along with the `inline` type. This can be any\ntype of file extension, just make sure you have the appropriate loaders enabled.\n\nFor example, `js` will always work by default. However, `css` will only work if the `css-loader` is enabled. If you have\nthe `less-loader` or `sass-loader` enabled, you can do something like this:\n\nLess version\n\n```twig\n\u003csection\u003e\n    {% webpack inline less %}\n    \u003cstyle\u003e\n    @color: #f00;\n    @size: 42px;\n\n    body {\n        color: @color;\n        section : {\n            size: @size;\n        }\n    }\n    \u003c/style\u003e\n    {% endwebpack %}\n\u003c/section\u003e\n```\n\nSass Version\n\n```twig\n\u003csection\u003e\n    {% webpack inline sass %}\n    \u003cstyle\u003e\n    $color: #f00;\n    $size: 42px;\n\n    body {\n        color: $color;\n        section : {\n            size: $size;\n        }\n    }\n    \u003c/style\u003e\n    {% endwebpack %}\n\u003c/section\u003e\n```\n\nThe compiler will automatically strip away the `\u003cstyle\u003e`- and/or `\u003cscript\u003e`-tags and save the contents of the block to\na file. This file will then be used for inclusion in your template by utilizing either a `link`-tag or a `script` tag\nthat refer to the compiled file.\n\n\n## Configuration\n\nThe configuration options of this package are pretty large, but all settings are optional and come with sane defaults.\n\nThe following configuration options are directly copied from webpack itself and can be configured as such. The only\ndifference to take into consideration is that keys are written in __underscores rather than camelCase__.\n\nFor example, in webpack configuring the `output.publicPath` setting would be written as:\n```yaml\nwebpack:\n    output:\n       public_path: '/public'\n```\n\nThe following \"webpack\" sections are configurable through `config.yml`:\n - `output`: http://webpack.github.io/docs/configuration.html#output\n - `resolve`: http://webpack.github.io/docs/configuration.html#resolve\n - `resolve_loader`: http://webpack.github.io/docs/configuration.html#resolveloader\n\nThe options `entry`, `resolve.root`, `resolve.alias` and `resolveModule.modulesDirectories` are configured automatically\nbased on split points (entry points), tracked bundles and the specified (or detected) node_modules directory. If you\nspecify any of these options, their values will be appended to the generated values.\n\n### Node\n\nIn order for this package to work properly, it needs to know the location where nodejs is installed and where to find\nits node_modules directory. If node is installed globally on your server, this setting may be omitted.\n\n```yaml\n# config.yml\nwebpack:\n    node:\n        binary: '/path/to/node-binary'\n        node_modules_path: '/path/to/node_modules'\n```\n\n#### Multi-platform configuration\n\nSince your application might be running on both windows, linux and macs all at the same time, you might need to specify\ndifferent node binaries. If this is the case, instead of passing a string referencing the node binary to the\n`node.binary` option, you may pass an array:\n\n```yaml\nwebpack:\n    node:\n       binary:\n          win32: 'C:\\\\path\\\\to\\\\node32.exe'\n          win64: 'C:\\\\path\\\\to\\\\node64.exe'\n          linux_x32: '/usr/bin/node32'\n          linux_x64: '/usr/bin/node64'\n          darwin: '/path/to/node'\n          fallback: '/if/os/detection/fails/path/to/node'\n```\n\nAgain, all settings are optional. If a key isn't specified, it defaults to \"node\". This will only work if node is\ninstalled globally.\n\n### Bundle configuration\n\nBy default, all enabled bundles are tracked. However, you may explicitly specify a set of bundles to track for\nperformance or security reasons.\n\n```yaml\nwebpack:\n    bundles: ['AppBundle', 'YourBundle']\n```\n\n#### Adding app resources to the tracked assets\n\nIf you decide to add your assets in app/Resources/assets, all you have to do is add an alias and it can be loaded via\nthe webpack loading mechanism.\n\n```yml\nwebpack:\n    resolve:\n        alias:\n            app: %kernel.root_dir%/Resources/assets\n```\n```javascript\n# can be loaded via\nrequire('app/base.js');\n```\n\n### Shared dependencies\n\nShared dependencies will be written to a separate javascript or css file if the option `output.common_id` is specified.\n\nFor example, the following configuration would output a `shared.js` and `shared.css` file.\n```yaml\nwebpack:\n    output:\n        common_id: 'shared'\n```\n\nIn your templates you will be able to retrieve the path to your common javascript file via `webpack_common_js()` and \n`webpack_common_css()`.\n\n```twig\n\u003cscript src=\"{{ webpack_common_js() }}\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"{{ webpack_common_css() }}\"\u003e\n\n{# will give the following output based on output.common_id #}\n\u003cscript src=\"/compiled/shared.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"/compiled/shared.css\"\u003e\n```\n\n### Asset output directories\n\n- Dumped assets from the \"public\" directory are symlinked or copied to the `\u003coutput.dump_dir\u003e` directory.\n- Compiled assets from the \"assets\" directory are written to the `\u003coutput.path\u003e` directory.\n- The twig function `webpack_asset` returns compiled file names prefixed with the `\u003coutput.public_path\u003e` directory.\n\n```yaml\nwebpack:\n    output:\n        path: '%kernel.root_dir%/../web/compiled/'\n        dump_path: '%kernel.root_dir%/../web/bundles/'\n        public_path: '/compiled/'\n```\n\nThe `path` value represents the asset paths from a client-side perspective. Therefore, it must specify the path\nof your app(_dev).php as exposed from the web e.g. somedomain.com/my-web/app.php would make it\n`%kernel.root_dir%/../web/my-app/compiled/` with the above example.\n\nIf the `output.path` value is `%kernel.root_dir/../web/packed/`, the value of `output.public_path` must be\nset to `/packed/`.\n\n### Ideal configuration\n\nThe following configuration requires the following modules to be present in your `node_modules` directory.\n\n - extract-text-webpack-plugin\n - style-loader\n - css-loader\n - less-loader\n - sass-loader\n - url-loader\n - babel-loader\n - ts-loader\n\nBecause we're creating shared chunks of javascript files, you'll need to include '`/compiled/shared.js`' manually in\nyour base template. The same might also be the case for your CSS files, depending on what you include and where you do\nit.\n\nconfig.yml\n```yaml\nwebpack:\n    node:\n        binary: '/path/to/node'\n        node_modules_path: '%kernel.root_dir%/../node_modules'\n    output:\n        path: '%kernel.root_dir%/../web/compiled/'\n        dump_path: '%kernel.root_dir%/../web/bundles/'\n        public_path: '/compiled/'\n        common_id: 'shared'\n    loaders:\n        css:\n            all_chunks: true\n            filename: '[name].css'\n        less:\n            all_chunks: true\n            filename: '[name].css'\n        sass:\n            all_chunks: true\n            filename: '[name].css'\n        url: ~\n        babel: ~\n        typescript: ~\n```\n\nbase.html.twig\n```html\n\u003chead\u003e\n    \u003cscript src=\"/compiled/shared.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\nSomewhere in your twig templates\n```twig\n{% webpack js \"@YourBundle/SomeModule.js\" %}\n    \u003cscript src=\"{{ asset }}\"\u003e\u003c/script\u003e\n{% endwebpack %}\n\n{% webpack css \"@YourBundle/SomeModule.js\" %}\n    \u003clink rel=\"stylesheet\" href=\"{{ asset }}\"\u003e\n{% endwebpack %}\n```\n\n### Compile Timeout\n\nBy default, webpack is only given 60 seconds to execute.  In cases where webpack needs more time, you can update the\n`compile_timeout` option.\n\n```yaml\nwebpack:\n    compile_timeout: 60\n```\n\n## Loaders\n\nLoaders allow you to `require` files other than javascript. This package comes with 7 default loaders.\n\n - `CssLoader`       : include CSS files\n - `UrlLoader`       : include images (converted to base64)\n - `LessLoader`      : include less files.\n - `SassLoader`      : include sass files.\n - `BabelLoader`     : include ES6 files.\n - `TypeScriptLoader`: include TypeScript files.\n - `CoffeeScriptLoader`: include CoffeeScript files.\n\nEach loader has its own configuration under the `loaders` section.\n\n### CSS\n\nEnables loading CSS files.\n\n\u003e You need the `css-loader` and `style-loader` node module for this to work.\n\n```yaml\nwebpack:\n    loaders:\n        css:\n            filename: '[name].css'\n            all_chunks: true\n```\n\nIf `filename` and `all_chunks` are omitted, any CSS is converted to a style-tag in the document rather than being\nexported to a separate CSS file. If the `output.common_id` setting is specified - which allows extracting shared code -\nthe [CommonsChunkPlugin](http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin) will be used\nautomatically as well.\n\nDepending on the specified configuration, one or more node-modules are required:\n\n - `enabled:true` : style-loader, css-loader\n - `filename` : extract-text-webpack-plugin\n\n### Less\n\nEnables loading less files.\n\nThis plugin shares the exact same configuration settings as the CSS loader.\n\n\u003e You need the `less-loader`, `css-loader` and `style-loader` node modules for this to work.\n\n```yaml\nwebpack:\n    loaders:\n       less:\n           filename: '[name].css'\n           all_chunks: true\n```\n\n### Sass\n\nEnables loading sass files.\n\nThis plugin shares the exact same configuration settings as the CSS loader.\n\n\u003e You need the `sass-loader`, `css-loader` and `style-loader` node modules for this to work.\n\n```yaml\nwebpack:\n    loaders:\n       sass:\n           filename: '[name].css'\n           all_chunks: true\n           include_paths:\n               - [include dirs for node-sass]\n```\n\n### URL\n\nConverts images to base64 code and embeds them in javascript.\n\nThis plugin only has an `enabled` setting. It is disabled by default.\n```yaml\nwebpack:\n    loaders:\n       url: ~\n```\n\n### Babel\n\nThe Babel Loader transpiles ECMAScript 6 code to ECMAScript 5 code, allowing it to run in older browsers. The loader\ncompiles `.jsx` files instead of `.js` files, because not all files need to be compiled. Once ES6 hits mainstream, all\nyou would need to do is gradually rename your jsx files to js files and everything _should_ still work.\n\n\u003e You need the `babel-loader` node module for this to work.\n\n```yaml\nwebpack:\n    loaders:\n        babel: ~\n```\n\n### TypeScript\n\nThe TypeScript Loader transpiles TypeScript 2 code to JavaScript code, allowing it to run in all browsers. The loader\ncompiles `.ts` files.\n\n\u003e You need the `ts-loader` node module for this to work with the default configuration.\n\n```yaml\nwebpack:\n    loaders:\n        typescript: ~\n```\n\nYou can also configure your own loader:\n\n```yaml\nwebpack:\n    loaders:\n        typescript:\n            loader: some-other-typescript-loader\n```\n\n### CoffeeScript\n\nThe CoffeeScript loader transpiles [CoffeeScript](http://coffeescript.org/) to portable (.js),\nallowing coffeescript to run in every browser. The loaders loads `.coffee`-files\n\n\u003e You need the [coffee-loader](https://github.com/webpack/coffee-loader)\n\n```yaml\nwebpack:\n    loaders:\n        coffee: ~\n```\n\nA `loader` field can specify any other CoffeeScript loader, see [TypeScript](#typescript).\n\n## Plugins\n\nThe webpack-bundle package comes with an easy way to develop and use plugins. A plugin simply writes pieces of code\nto the generated webpack configuration file, and by doing so it _should_ enable more features.\n\n### DefinePlugin\n\nThe define plugin allows you to declare global variables throughout the application.\nSee the [defineplugin documentation](https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin) for more\ninformation.\n\nIn the example below, imagine a parameter named \"environment\" having the value \"dev\".\n```yaml\nwebpack:\n    plugins:\n        constants:\n            ENVIRONMENT: %environment%\n```\n\nLater, somewhere in an asset...\n```javascript\n// start\nif (ENVIRONMENT === 'dev') {\n    console.log('Hello World!');\n}\n// end\n```\nThese variable declarations are parsed by webpack. Once the code is compiled and minified, these variables are left out\ncompletely in the final code.\n\nThis means that the code on your development machine would result in something like this:\n```javascript\n// start\nconsole.log('Hello World');\n// end\n```\n\nAnd in production\n```javascript\n// start\n// end\n```\nNote that the comments are only here for illustrating this example. Compiled and minified code won't contain these.\n\n### ProvidePlugin\n\nAutomatically load module and assign it to a global variable like `$` for jquery.\nSee the [provideplugin documentation](https://github.com/webpack/docs/wiki/list-of-plugins#provideplugin) for more\ninformation.\n\nIn the example below, imagine you want to access jquery through \"$\" or \"jQuery\". You just need to add this configuration and the plugin will do the rest for you.\n\n```yaml\nplugins:\n    provides:\n        '$': 'jquery'\n        'jQuery': 'jquery'\n```\n\nNow you can add you javascript in an inline script and webpack will automatically require \"jquery\" for you.\n\n\n```javascript\n{% webpack inline %}\n\u003cscript type=\"text/javascript\"\u003e\n    $(function () {\n        $('[data-toggle=\"tooltip\"]').tooltip()\n    })\n\u003c/script\u003e\n{% endwebpack %}\n```\n\n__Important:__\n\nDon't forget to install jquery via npm\n`npm install jquery`.\nAs all `node_modules` are resolved in `webpack.config.js` it will find it automatically.\n\n### UglifyJS\n\nRun UglifyJS on JS output, creating smaller and more optimized JS files.\nSee the [uglifyjs documentation](https://github.com/mishoo/UglifyJS2) for more\ninformation.\n\n```yaml\nplugins:\n    uglifyjs:\n        mangle_except: ['$super', '$', 'exports', 'require']  # Variable names to not mangle\n        source_map: true             # Generate a source map for tracking errors in compressed files.\n        test: '/\\.js($|\\?)/i'        # RegExp to filter processed files\n        minimize: true               # Whether to minimize or not\n        \n        # Options to set which optimizations UglifyJS will perform.\n        compress:\n            sequences: true              # Join consecutive statements with the \"comma operator\"\n            properties: true             # Optimize property access: a[\"foo\"] → a.foo\n            dead_code: true              # Discard unreachable code\n            drop_debugger: true          # Discard \"debugger\" statements\n            unsafe: false                # Perform unsafe optimizations\n            conditionals: true           # Optimize ifs and conditional expressions\n            comparisons: true            # Optimize comparisons\n            evaluate: true               # Evaluate constant expressions\n            booleans: true               # Optimize boolean expressions\n            loops: true                  # Optimize loops\n            unused: true                 # Drop unused variables/functions\n            hoist_funs: true             # Hoist function declarations\n            hoist_vars: false            # Hoist variable declarations\n            if_return: true              # Optimize if-s followed by return/continue\n            join_vars: true              # Join var declarations\n            cascade: true                # Try to cascade `right` into `left` in sequences\n            side_effects: true           # Drop side-effect-free statements\n            warnings: false              # Warn about potentially dangerous optimizations/code\n```\n\nNow when your JS files are built, they will be compressed and optimized using UglifyJS.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhostnet%2Fwebpack-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhostnet%2Fwebpack-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhostnet%2Fwebpack-bundle/lists"}