{"id":16296776,"url":"https://github.com/pgaultier/yii2-webpack","last_synced_at":"2025-04-09T16:17:06.944Z","repository":{"id":57062987,"uuid":"86455658","full_name":"pgaultier/yii2-webpack","owner":"pgaultier","description":"Yii2 Webpack2 asset management","archived":false,"fork":false,"pushed_at":"2018-12-21T16:47:09.000Z","size":71,"stargazers_count":107,"open_issues_count":5,"forks_count":17,"subscribers_count":16,"default_branch":"devel","last_synced_at":"2024-04-23T15:40:58.182Z","etag":null,"topics":["assets","es6","typescript","webpack","yii2"],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pgaultier.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-28T12:10:24.000Z","updated_at":"2024-03-22T06:37:32.000Z","dependencies_parsed_at":"2022-08-24T14:00:47.015Z","dependency_job_id":null,"html_url":"https://github.com/pgaultier/yii2-webpack","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgaultier%2Fyii2-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgaultier%2Fyii2-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgaultier%2Fyii2-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pgaultier%2Fyii2-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pgaultier","download_url":"https://codeload.github.com/pgaultier/yii2-webpack/tar.gz/refs/heads/devel","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065285,"owners_count":21041872,"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":["assets","es6","typescript","webpack","yii2"],"created_at":"2024-10-10T20:23:56.773Z","updated_at":"2025-04-09T16:17:06.913Z","avatar_url":"https://github.com/pgaultier.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"Yii2 Webpack integration\n========================\n\nThis extension allow the developper to use [Webpack 2](https://webpack.js.org/) as the asset manager.\n\nWebpack2 comes preconfigured with the following loaders \n * javascript\n * typescript\n * sass\n * less\n * css\n\n\n[![Latest Stable Version](https://poser.pugx.org/sweelix/yii2-webpack/v/stable)](https://packagist.org/packages/sweelix/yii2-webpack)\n[![License](https://poser.pugx.org/sweelix/yii2-webpack/license)](https://packagist.org/packages/sweelix/yii2-webpack)\n\u003c!--\n[![Build Status](https://api.travis-ci.org/pgaultier/yii2-webpack.svg?branch=master)](https://travis-ci.org/pgaultier/yii2-webpack)\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/?branch=master)\n[![Code Coverage](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/badges/coverage.png?b=master)](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/?branch=master)\n--\u003e\n\n\n[![Latest Development Version](https://img.shields.io/badge/unstable-devel-yellowgreen.svg)](https://packagist.org/packages/sweelix/yii2-webpack)\n\u003c!--\n[![Build Status](https://travis-ci.org/pgaultier/yii2-webpack.svg?branch=devel)](https://travis-ci.org/pgaultier/yii2-webpack)\n[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/badges/quality-score.png?b=devel)](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/?branch=devel)\n[![Code Coverage](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/badges/coverage.png?b=devel)](https://scrutinizer-ci.com/g/pgaultier/yii2-webpack/?branch=devel)\n--\u003e\n\nInstallation\n------------\n\nIf you use Packagist for installing packages, then you can update your `composer.json like this :\n\n``` json\n{\n    \"require\": {\n        \"sweelix/yii2-webpack\": \"*\"\n    }\n}\n```\n\nWarning\n-------\n\nWhen `vendor` modules use typescript, typescript code can collide. In order to avoid this, you should update your `tsconfig.json` to exclude `vendor` modules\n\n### Generic `tsconfig.json`\n\n```json\n{\n    \"compilerOptions\": {\n        \"sourceMap\": true,\n        \"noImplicitAny\": true,\n        \"module\": \"commonjs\",\n        \"target\": \"es5\",\n        \"jsx\": \"react\",\n        \"allowJs\": true\n    }\n}\n```\n\n### Amended `tsconfig.json`\n\nIf `vendor` modules are in folder **vendor** you should update your `tsconfig.json` like this:\n \n```json\n{\n    \"compilerOptions\": {\n        \"sourceMap\": true,\n        \"noImplicitAny\": true,\n        \"module\": \"commonjs\",\n        \"target\": \"es5\",\n        \"jsx\": \"react\",\n        \"allowJs\": true\n    },\n    \"exclude\": [\n        \"node_modules\",\n        \"vendor\"\n    ]\n}\n```\n\nHowto use it\n------------\n\nAdd extension to your console configuration to enable CLI commands\n\n``` php\nreturn [\n    // add webpack to console bootstrap to attach console controllers \n    'bootstrap' =\u003e ['log', 'webpack'],   \n    //....\n    'modules' =\u003e [\n        'webpack' =\u003e [\n            'class' =\u003e 'sweelix\\webpack\\Module',\n        ],\n        // ...\n    ],\n];\n```\n\n### Generate everything from scratch (init webpack stuff)\n\n```\nphp protected/yii webpack\n```\n\n * **Generating package.json**\n   * **Relative path to composer.json ?** If you are in main directory, this is probably `composer.json` \n   * **Application name ?** Application name which will be used in package.json\n   * **Author ?** Your name \n   * **Description ?** Description of package.json \n   * **License ?** License of the application\n\n * **Generating webpack-yii2.json**\n   * **Webpack assets path relative to package.json** This is where you will write your front app (`protected/assets/webpack` for example)  \n   * **Webpack assets source directory ?** Name of the directory (inside webpack assets relative path) where you will create sources `src`\n   * **Webpack assets distribution directory ?** Name of the directory (inside webpack assets relative path) where bundles will be generated `dist`\n   * **Webpack assets distribution scripts directory ?** Name of the directory (inside `dist`) where scripts will be stored (`js`)\n   * **Webpack assets distribution styles directory ?** Name of the directory (inside `dist`) where styles will be stored (`css`)\n   * **Webpack catalog filename ?** Name of catalog file which will allow the asset manager to find the bundles\n\n * **Generating webpack.config.js** \n \nif you need to regenerate one of the files, you can use the following CLI commands :\n \n  * `php protected/yii webpack/generate-config` : regenerate `webpack-yii2.json`\n  * `php protected/yii webpack/generate-package` : regenerate `package.json`\n  * `php protected/yii webpack/generate-webpack` : regenerate `webpack.config.js`\n  * `php protected/yii webpack/generate-generate-typescript-config` : regenerate `tsconfig.json`\n  \n### Sample application structure\n  \nIf your application has the following directory structure : \n  \n * *index.php*\n * *composer.json*\n * **protected**\n   * *yii* (console script)\n   * **assets**\n     * *WebpackAsset.php*\n     * **webpack**\n       * **src**\n         * *app.ts*\n         * **css**\n           * *app.css*\n   * *...*      \n  \n#### Run webpack init to prepare application \n  \nThe typical answer when running `php protected/yii webpack` would be :\n   \n * **Generating package.json**\n   * **Relative path to composer.json ?** Leave default value\n   * **Application name ?** Leave default value\n   * **Author ?** Leave default value \n   * **Description ?** Leave default value \n   * **License ?** Leave default value\n\n * **Generating webpack-yii2.json**\n   * **Webpack assets path relative to package.json** `protected/assets/webpack`  \n   * **Webpack assets source directory ?** Leave default value\n   * **Webpack assets distribution directory ?** Leave default value\n   * **Webpack assets distribution scripts directory ?** Leave default value\n   * **Webpack assets distribution styles directory ?** Leave default value\n   * **Webpack catalog filename ?** Leave default value\n\n * **Generating webpack.config.js** \n\n * **Generating tsconfig.json** \n\nApplication structure with generated files will be\n\n * *index.php*\n * *composer.json*\n * *package.json*\n * *webpack-yii2.json*\n * *webpack.config.js*\n * *tsconfig.json*\n * **protected**\n   * *yii* (console script)\n   * **assets**\n     * *WebpackAsset.php*\n     * **webpack**\n       * *assets-catalog.json* -\u003e generated by webpack\n       * **dist** -\u003e generated by webpack\n         * **js**\n           * *js bundles*\n         * **css**\n           * *css bundles*\n       * **src**\n         * *app.ts*\n         * **css**\n           * *app.css*\n   * *...*      \n\n#### Create Webpack aware asset\n\n```php\nnamespace app\\assets;\n\nuse sweelix\\webpack\\WebpackAssetBundle;\n\nclass WebpackAsset extends WebpackAssetBundle\n{\n\n    /**\n     * @var bool enable caching system (default to false)\n     */\n    public $cacheEnabled = false;\n\n    /**\n     * @var \\yii\\caching\\Cache cache name of cache to use, default to `cache`\n     */\n    public $cache = 'cache';\n\n    /**\n     * @var string base webpack alias (do not add /src nor /dist, they are automagically handled)\n     */\n    public $webpackPath = '@app/assets/webpack';\n\n    /**\n     * @var array list of webpack bundles to publish (these are the entries from webpack)\n     * the bundles (except for the manifest one which should be in first position) must be defined\n     * in the webpack-yii2.json configuration file\n     */\n    public $webpackBundles = [\n        'manifest',\n        'app'\n    ];\n\n}\n```  \n\n#### Generate the assets\n\nFor development run\n\n```\nwebpack\n```\nor to enable automatic build on file change\n```\nnpm run watch\n```\n\n\nFor production run\n\n```\nnpm run dist-clean \n```\n\n#### Add files to your repository\n\nWhen your assets are ready, you have to make sure following files are added to your repository :\n\n * `package.json` node package management\n * `webpack.config.js` needed to run webpack\n * `webpack-yii2.json` needed by webpack.config.js to define you app entry points and the target directories\n * `tsconfig.json` needed by webpack.config.js to handle Typescript files\n\n * `\u003cappdir\u003e/assets/webpack/assets-catalog.json` to let the webpack aware asset find the dist files\n * `\u003cappdir\u003e/assets/webpack/dist` to keep the assets (they are not dynamically generated when asset is registered)\n * `\u003cappdir\u003e/assets/webpack/src` because you want to keep your sources :-)\n \n\n### File `webpack-yii2.json` explained\n \n```json\n{\n    \"sourceDir\": \"protected\\/assets\\/webpack\",\n    \"entry\": {\n        \"app\": \"./app.ts\"\n    },\n    \"commonBundles\": [\n        \"manifest\"\n    ],\n    \"externals\": {\n\n    },\n    \"subDirectories\": {\n        \"sources\": \"src\",\n        \"dist\": \"dist\"\n    },\n    \"assets\": {\n        \"styles\": \"css\",\n        \"scripts\": \"js\"\n    },\n    \"sri\": \"sha256\",\n    \"catalog\": \"assets-catalog.json\"\n}\n```\n\n#### Specific to yii2-webpack module\n\n * **sourceDir** relative path to the directory where assets will be managed\n * **subDirectories** subpath (in *\u003c sourceDir \u003e*) of sources and distribution files\n * **assets** subpath (in *\u003c sourceDir \u003e/\u003c subDirectories.dist \u003e*) of styles and scripts assets\n * **catalog** name of assets catalog, must be in synch with `WebpackAssetBundle::$webpackAssetCatalog`\n  \n#### Mapped to Webpack vars\n  \n * **entry** object syntax entry points [Webpack entry documentation](https://webpack.js.org/concepts/entry-points/#object-syntax)\n * **commonBundles** explicit vendor chunk [Webpack CommonChunkPlugin documentation](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk)\n * **externals** object syntax externals [Webpack externals documentation](https://webpack.js.org/configuration/externals/#object)\n * **alias** object syntax resolve.alias [Webpack resolve.alias documentation](https://webpack.js.org/configuration/resolve/#resolve-alias)\n \n\n### Allow multiple `webpack-yii2.json`\n \nIf your project needs multiple webpack configurations (take care of `manifest.js` collision), you can create the `webpack-yii2.json` directly in the assets directory.\n \n#### Example\n\nInstead of having `webpack-yii2.json` in root directory, you can put it in your assets directory.\n \nIn this case, application structure should look like this:\n \n  * *index.php*\n  * *composer.json*\n  * *package.json*\n  * *webpack-yii2.json*\n  * *webpack.config.js*\n  * *tsconfig.json*\n  * **protected**\n    * *yii* (console script)\n    * **assets**\n      * *WebpackAsset.php*\n      * **webpack**\n        * *webpack-yii2.json* -\u003e **Webpack specific file**\n        * *assets-catalog.json* -\u003e generated by webpack\n        * **dist** -\u003e generated by webpack\n          * **js**\n            * *js bundles*\n          * **css**\n            * *css bundles*\n        * **src**\n          * *app.ts*\n          * **css**\n            * *app.css*\n    * *...*      \n\nIn order to run this specific configuration,\n\nFor development run\n\n```\nwebpack --env.config=protected/assets/webpack\n```\nor to enable automatic build on file change\n```\nwebpack --watch  --env.config=protected/assets/webpack\n```\n\nFor production run\n\n```\nwebpack -p  --env.config=protected/assets/webpack\n```\n\nThis will take the `webpack-yii2.json` which is in `protected/assets/webpack` everything else is unchanged\n \nContributing\n------------\n\nAll code contributions - including those of people having commit access -\nmust go through a pull request and approved by a core developer before being\nmerged. This is to ensure proper review of all the code.\n\nFork the project, create a [feature branch ](http://nvie.com/posts/a-successful-git-branching-model/), and send us a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgaultier%2Fyii2-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpgaultier%2Fyii2-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpgaultier%2Fyii2-webpack/lists"}