Download the PHP package sweelix/yii2-webpack without Composer

Yii2 Webpack integration

This extension allow the developper to use Webpack 2 as the asset manager.

Webpack2 comes preconfigured with the following loaders

• javascript
• typescript
• sass
• less
• css

Installation

If you use Packagist for installing packages, then you can update your `composer.json like this :

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

Amended tsconfig.json

If vendor modules are in folder vendor you should update your tsconfig.json like this:

Howto use it

Add extension to your console configuration to enable CLI commands

Generate everything from scratch (init webpack stuff)

• 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

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

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

Generate the assets

For development run

or to enable automatic build on file change

For production run

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

• <appdir>/assets/webpack/assets-catalog.json to let the webpack aware asset find the dist files
• <appdir>/assets/webpack/dist to keep the assets (they are not dynamically generated when asset is registered)
• <appdir>/assets/webpack/src because you want to keep your sources :-)

File webpack-yii2.json explained

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

• entry object syntax entry points Webpack entry documentation
• commonBundles explicit vendor chunk Webpack CommonChunkPlugin documentation
• externals object syntax externals Webpack externals documentation
• alias object syntax resolve.alias Webpack resolve.alias documentation

Allow multiple webpack-yii2.json

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

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

or to enable automatic build on file change

For production run

This will take the webpack-yii2.json which is in protected/assets/webpack everything else is unchanged

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 , and send us a pull request.