https://github.com/leonied7/yii2-webpack
Webpack integration with Yii2
https://github.com/leonied7/yii2-webpack
assets assets-management webpack yii2
Last synced: 5 months ago
JSON representation
Webpack integration with Yii2
- Host: GitHub
- URL: https://github.com/leonied7/yii2-webpack
- Owner: leonied7
- License: mit
- Created: 2019-03-29T08:27:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-06-01T09:16:30.000Z (about 7 years ago)
- Last Synced: 2024-11-14T18:48:12.709Z (over 1 year ago)
- Topics: assets, assets-management, webpack, yii2
- Language: JavaScript
- Size: 180 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Yii2 Webpack integration
========================
This extension allow use [Webpack 3 or 4](https://webpack.js.org/) as the asset manager.
Installation
------------
```bash
npm i --save yii2-webpack
```
```bash
yarn add yii2-webpack
```
**Package.json**
The project needs a `package.json` file to specify how to start `yii2-webpack`:
```json
{
"name": "my-app",
"scripts": {
"dev": "yii2-webpack-exec --yii2-webpack-config dev",
"build": "yii2-webpack-exec --yii2-webpack-config prod"
}
}
```
**Flags**
* `--yii2-webpack-config`:
* `dev` - uses `webpack-dev-server` by default and config `webpack.dev.js` located in webpack directory
* `prod` - uses `webpack` by default and config `webpack.prod.js` located in webpack directory
* `--yii2-webpack-command` - to use different command
> The remaining flags will be sent to the command
Howto use it
------------
`scripts` will launch yii2-webpack via `npm run dev`. The script uses the config of your development.
All entries must be described by an object. The key is used for the asset name.
Examples
--------
Webpack config:
```
{
...
entry: {
main: './src/main.js',
bootstrap: './src/bootstrap.js'
}
...
}
```
yii2-webpack-settings.json:
```json
{
"assetDirectory":"assets",
"namespace":"@app/webpack"
}
```
Creates an asset directory in `webpack/assets` with the following contents:
* MainAsset.php
* BootstrapAsset.php
Configuration
-------------
>By default, the plugin works with relation to the project root and creates assets in the `assets` directory
Use the CLI for change the configuration
1. Add to `package.json` script `yii2-webpack`
```json
{
"name": "my-app",
"scripts": {
"yii2-webpack": "yii2-webpack",
"dev": "yii2-webpack-exec --yii2-webpack-config dev"
}
}
```
2. Run via command line `yii2-webpack`
3. The CLI will create a `yii2-webpack-settings.json` config in the webpack directory
**Options**
Available parameters `yii2-webpack-settings.json`:
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**[`assetDirectory`]**|`{String}`|`assets`|`webpack` relative path to the output asset directory|
|**[`namespace`]**|`{String}`|`@app`|Namespace before your `package.json`|
|**[`webpackDirectory`]**|`{String}`||The directory up to `package.json` relative to @app. **Deprecated**, use `namespace` parameter|
|**[`devConfig`]**|`{String}`|`'webpack.dev.js'`|The file of the development configuration. Defaults to `webpack.dev.js`. You can specify a subdirectory here too (eg: `src/dev.js`)|
|**[`prodConfig`]**|`{String}`|`'webpack.prod.js'`|The file of the production configuration. Defaults to `webpack.prod.js`. You can specify a subdirectory here too (eg: `src/prod.js`)|
|**[`template`]**|`{String}`||`webpack` relative or absolute path to the template. By default it will use `/index.ejs`. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
> All described parameters are passed to the template and can be obtained via `htmlWebpackPlugin.options.yii2Entry.options`