PHPackages sweelix/yii2-webpack - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. sweelix/yii2-webpack Abandoned → [blackcube/yii-assets](/?search=blackcube%2Fyii-assets)Yii2-extension[Utility & Helpers](/categories/utility) sweelix/yii2-webpack ==================== PHP 7.1+ Webpack integration for the Yii framework 1.4.0(7y ago)104147.9k↓13.8%17[4 issues](https://github.com/pgaultier/yii2-webpack/issues)[1 PRs](https://github.com/pgaultier/yii2-webpack/pulls)BSD-3-ClausePHPPHP >=7.1.0 Since Mar 28Pushed 7y ago14 watchersCompare [ Source](https://github.com/pgaultier/yii2-webpack)[ Packagist](https://packagist.org/packages/sweelix/yii2-webpack)[ RSS](/packages/sweelix-yii2-webpack/feed)WikiDiscussions devel Synced 1mo ago READMEChangelogDependencies (2)Versions (11)Used By (0) Yii2 Webpack integration ======================== [](#yii2-webpack-integration) This extension allow the developper to use [Webpack 2](https://webpack.js.org/) as the asset manager. Webpack2 comes preconfigured with the following loaders - javascript - typescript - sass - less - css [![Latest Stable Version](https://camo.githubusercontent.com/6eaece35a732721a914cc5b3077c97ed8d2c2239c4e4b79109f6e339e357eeda/68747470733a2f2f706f7365722e707567782e6f72672f737765656c69782f796969322d7765627061636b2f762f737461626c65)](https://packagist.org/packages/sweelix/yii2-webpack)[![License](https://camo.githubusercontent.com/4d4d3a27f95290663fca50c7e23e9616418eda8633504dea25b975bccde3d76b/68747470733a2f2f706f7365722e707567782e6f72672f737765656c69782f796969322d7765627061636b2f6c6963656e7365)](https://packagist.org/packages/sweelix/yii2-webpack) [![Latest Development Version](https://camo.githubusercontent.com/da9290457cc26b65f8faba577f924f94512f24929311567c357a38320d6772fd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f756e737461626c652d646576656c2d79656c6c6f77677265656e2e737667)](https://packagist.org/packages/sweelix/yii2-webpack) Installation ------------ [](#installation) If you use Packagist for installing packages, then you can update your `composer.json like this : ``` { "require": { "sweelix/yii2-webpack": "*" } } ``` Warning ------- [](#warning) When `vendor` modules use typescript, typescript code can collide. In order to avoid this, you should update your `tsconfig.json` to exclude `vendor` modules ### Generic `tsconfig.json` [](#generic-tsconfigjson) ``` { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true } } ``` ### Amended `tsconfig.json` [](#amended-tsconfigjson) If `vendor` modules are in folder **vendor** you should update your `tsconfig.json` like this: ``` { "compilerOptions": { "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", "allowJs": true }, "exclude": [ "node_modules", "vendor" ] } ``` Howto use it ------------ [](#howto-use-it) Add extension to your console configuration to enable CLI commands ``` return [ // add webpack to console bootstrap to attach console controllers 'bootstrap' => ['log', 'webpack'], //.... 'modules' => [ 'webpack' => [ 'class' => 'sweelix\webpack\Module', ], // ... ], ]; ``` ### Generate everything from scratch (init webpack stuff) [](#generate-everything-from-scratch-init-webpack-stuff) ``` php protected/yii webpack ``` - **Generating package.json** - **Relative path to composer.json ?** If you are in main directory, this is probably `composer.json` - **Application name ?** Application name which will be used in package.json - **Author ?** Your name - **Description ?** Description of package.json - **License ?** License of the application - **Generating webpack-yii2.json** - **Webpack assets path relative to package.json** This is where you will write your front app (`protected/assets/webpack` for example) - **Webpack assets source directory ?** Name of the directory (inside webpack assets relative path) where you will create sources `src` - **Webpack assets distribution directory ?** Name of the directory (inside webpack assets relative path) where bundles will be generated `dist` - **Webpack assets distribution scripts directory ?** Name of the directory (inside `dist`) where scripts will be stored (`js`) - **Webpack assets distribution styles directory ?** Name of the directory (inside `dist`) where styles will be stored (`css`) - **Webpack catalog filename ?** Name of catalog file which will allow the asset manager to find the bundles - **Generating webpack.config.js** if you need to regenerate one of the files, you can use the following CLI commands : - `php protected/yii webpack/generate-config` : regenerate `webpack-yii2.json` - `php protected/yii webpack/generate-package` : regenerate `package.json` - `php protected/yii webpack/generate-webpack` : regenerate `webpack.config.js` - `php protected/yii webpack/generate-generate-typescript-config` : regenerate `tsconfig.json` ### Sample application structure [](#sample-application-structure) If your application has the following directory structure : - *index.php* - *composer.json* - **protected** - *yii* (console script) - **assets** - *WebpackAsset.php* - **webpack** - **src** - *app.ts* - **css** - *app.css* - *...* #### Run webpack init to prepare application [](#run-webpack-init-to-prepare-application) The typical answer when running `php protected/yii webpack` would be : - **Generating package.json** - **Relative path to composer.json ?** Leave default value - **Application name ?** Leave default value - **Author ?** Leave default value - **Description ?** Leave default value - **License ?** Leave default value - **Generating webpack-yii2.json** - **Webpack assets path relative to package.json** `protected/assets/webpack` - **Webpack assets source directory ?** Leave default value - **Webpack assets distribution directory ?** Leave default value - **Webpack assets distribution scripts directory ?** Leave default value - **Webpack assets distribution styles directory ?** Leave default value - **Webpack catalog filename ?** Leave default value - **Generating webpack.config.js** - **Generating tsconfig.json** Application structure with generated files will be - *index.php* - *composer.json* - *package.json* - *webpack-yii2.json* - *webpack.config.js* - *tsconfig.json* - **protected** - *yii* (console script) - **assets** - *WebpackAsset.php* - **webpack** - *assets-catalog.json* -> generated by webpack - **dist** -> generated by webpack - **js** - *js bundles* - **css** - *css bundles* - **src** - *app.ts* - **css** - *app.css* - *...* #### Create Webpack aware asset [](#create-webpack-aware-asset) ``` namespace app\assets; use sweelix\webpack\WebpackAssetBundle; class WebpackAsset extends WebpackAssetBundle { /** * @var bool enable caching system (default to false) */ public $cacheEnabled = false; /** * @var \yii\caching\Cache cache name of cache to use, default to `cache` */ public $cache = 'cache'; /** * @var string base webpack alias (do not add /src nor /dist, they are automagically handled) */ public $webpackPath = '@app/assets/webpack'; /** * @var array list of webpack bundles to publish (these are the entries from webpack) * the bundles (except for the manifest one which should be in first position) must be defined * in the webpack-yii2.json configuration file */ public $webpackBundles = [ 'manifest', 'app' ]; } ``` #### Generate the assets [](#generate-the-assets) For development run ``` webpack ``` or to enable automatic build on file change ``` npm run watch ``` For production run ``` npm run dist-clean ``` #### Add files to your repository [](#add-files-to-your-repository) When your assets are ready, you have to make sure following files are added to your repository : - `package.json` node package management - `webpack.config.js` needed to run webpack - `webpack-yii2.json` needed by webpack.config.js to define you app entry points and the target directories - `tsconfig.json` needed by webpack.config.js to handle Typescript files - `/assets/webpack/assets-catalog.json` to let the webpack aware asset find the dist files - `/assets/webpack/dist` to keep the assets (they are not dynamically generated when asset is registered) - `/assets/webpack/src` because you want to keep your sources :-) ### File `webpack-yii2.json` explained [](#file-webpack-yii2json-explained) ``` { "sourceDir": "protected\/assets\/webpack", "entry": { "app": "./app.ts" }, "commonBundles": [ "manifest" ], "externals": { }, "subDirectories": { "sources": "src", "dist": "dist" }, "assets": { "styles": "css", "scripts": "js" }, "sri": "sha256", "catalog": "assets-catalog.json" } ``` #### Specific to yii2-webpack module [](#specific-to-yii2-webpack-module) - **sourceDir** relative path to the directory where assets will be managed - **subDirectories** subpath (in *< sourceDir >*) of sources and distribution files - **assets** subpath (in *< sourceDir >/< subDirectories.dist >*) of styles and scripts assets - **catalog** name of assets catalog, must be in synch with `WebpackAssetBundle::$webpackAssetCatalog` #### Mapped to Webpack vars [](#mapped-to-webpack-vars) - **entry** object syntax entry points [Webpack entry documentation](https://webpack.js.org/concepts/entry-points/#object-syntax) - **commonBundles** explicit vendor chunk [Webpack CommonChunkPlugin documentation](https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk) - **externals** object syntax externals [Webpack externals documentation](https://webpack.js.org/configuration/externals/#object) - **alias** object syntax resolve.alias [Webpack resolve.alias documentation](https://webpack.js.org/configuration/resolve/#resolve-alias) ### Allow multiple `webpack-yii2.json` [](#allow-multiple-webpack-yii2json) If your project needs multiple webpack configurations (take care of `manifest.js` collision), you can create the `webpack-yii2.json` directly in the assets directory. #### Example [](#example) Instead of having `webpack-yii2.json` in root directory, you can put it in your assets directory. In this case, application structure should look like this: - *index.php* - *composer.json* - *package.json* - *webpack-yii2.json* - *webpack.config.js* - *tsconfig.json* - **protected** - *yii* (console script) - **assets** - *WebpackAsset.php* - **webpack** - *webpack-yii2.json* -> **Webpack specific file** - *assets-catalog.json* -> generated by webpack - **dist** -> generated by webpack - **js** - *js bundles* - **css** - *css bundles* - **src** - *app.ts* - **css** - *app.css* - *...* In order to run this specific configuration, For development run ``` webpack --env.config=protected/assets/webpack ``` or to enable automatic build on file change ``` webpack --watch --env.config=protected/assets/webpack ``` For production run ``` webpack -p --env.config=protected/assets/webpack ``` This will take the `webpack-yii2.json` which is in `protected/assets/webpack` everything else is unchanged Contributing ------------ [](#contributing) All code contributions - including those of people having commit access - must go through a pull request and approved by a core developer before being merged. This is to ensure proper review of all the code. Fork the project, create a [feature branch ](http://nvie.com/posts/a-successful-git-branching-model/), and send us a pull request. ### Health Score 40 — FairBetter than 88% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity47 Moderate usage in the ecosystem Community15 Small or concentrated contributor base Maturity64 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~105 days Recently: every ~155 days Total 7 Last Release 2705d ago PHP version history (2 changes)1.0.0PHP >=5.6.0 1.3.0PHP >=7.1.0 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/545714?v=4)[pgaultier](/maintainers/pgaultier)[@pgaultier](https://github.com/pgaultier) --- Top Contributors [![pgaultier](https://avatars.githubusercontent.com/u/545714?v=4)](https://github.com/pgaultier "pgaultier (66 commits)") --- Tags assetses6typescriptwebpackyii2yii2assetswebpack ### Code Quality TestsCodeception ### Embed Badge ![Health badge](/badges/sweelix-yii2-webpack/health.svg) ``` [![Health](https://phpackages.com/badges/sweelix-yii2-webpack/health.svg)](https://phpackages.com/packages/sweelix-yii2-webpack) ``` ### Alternatives [blacksmoke26/yii2cdn A Yii Framework 2 component for using assets in different environments (Local/CDNs) 1412.0k](/packages/blacksmoke26-yii2cdn) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)