README

此扩展允许开发者使用 Webpack 2 作为资产管理系统。

Webpack2 默认配置以下加载器

• javascript
• typescript
• sass
• less
• css

安装

如果您使用 Packagist 安装软件包，则可以像这样更新您的 `composer.json`

{
    "require": {
        "sweelix/yii2-webpack": "*"
    }
}

警告

当 vendor 模块使用 TypeScript 时，TypeScript 代码可能会冲突。为了避免这种情况，您应该将 tsconfig.json 更新为排除 vendor 模块。

通用 tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true
    }
}

修改后的 tsconfig.json

如果 vendor 模块位于 vendor 文件夹中，则应将 tsconfig.json 更新为以下内容

{
    "compilerOptions": {
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true
    },
    "exclude": [
        "node_modules",
        "vendor"
    ]
}

如何使用它

将扩展添加到您的控制台配置中，以启用 CLI 命令

return [
    // add webpack to console bootstrap to attach console controllers 
    'bootstrap' => ['log', 'webpack'],   
    //....
    'modules' => [
        'webpack' => [
            'class' => 'sweelix\webpack\Module',
        ],
        // ...
    ],
];

从头开始生成一切（初始化 Webpack 相关内容）

php protected/yii webpack

• 生成 package.json

  • 相对于 composer.json 的相对路径？ 如果您在主目录中，这可能是 composer.json
  • 应用程序名称？ 将用于 package.json 的应用程序名称
  • 作者？ 您的姓名
  • 描述？ package.json 的描述
  • 许可证？ 应用程序的许可证

• 生成 webpack-yii2.json

  • 相对于 package.json 的 Webpack 资产路径 这是您将编写前端应用程序的位置（例如 protected/assets/webpack）
  • Webpack 资产源目录？ 在 Webpack 资产相对路径中创建源目录的名称（src）
  • Webpack 资产分发目录？ 在 Webpack 资产相对路径中创建生成的捆绑包的目录名称（dist）
  • Webpack 资产分发脚本目录？ 在 dist 中存储脚本的目录名称（js）
  • Webpack 资产分发样式目录？ 在 dist 中存储样式的目录名称（css）
  • Webpack 目录文件名？ 目录文件名称，该文件将允许资产管理器查找捆绑包

• 生成 webpack.config.js

如果您需要重新生成其中一个文件，可以使用以下 CLI 命令

• php protected/yii webpack/generate-config : 重新生成 webpack-yii2.json
• php protected/yii webpack/generate-package : 重新生成 package.json
• php protected/yii webpack/generate-webpack : 重新生成 webpack.config.js
• php protected/yii webpack/generate-generate-typescript-config : 重新生成 tsconfig.json

示例应用程序结构

如果您的应用程序具有以下目录结构

• index.php
• composer.json
• protected
  • yii (控制台脚本)
  • assets
    • WebpackAsset.php
    • webpack
      • src
        • app.ts
        • css
          • app.css
  • ...

运行 webpack init 以准备应用程序

运行 php protected/yii webpack 的典型回答可能是

• 生成 package.json

  • 相对于 composer.json 的相对路径？ 保持默认值
  • 应用程序名称？ 保持默认值
  • 作者？ 保持默认值
  • 描述？ 保持默认值
  • 许可证？ 保持默认值

• 生成 webpack-yii2.json

  • 相对于 package.json 的 Webpack 资产路径 protected/assets/webpack
  • Webpack 资产源目录？ 保持默认值
  • Webpack 资产分发目录？ 保持默认值
  • Webpack 资产分发脚本目录？ 保持默认值
  • Webpack 资产分布样式目录？ 保持默认值
  • Webpack 目录文件名？ 保持默认值

• 生成 webpack.config.js

• 生成 tsconfig.json

生成的应用程序结构和文件将如下

• index.php
• composer.json
• package.json
• webpack-yii2.json
• webpack.config.js
• tsconfig.json
• protected
  • yii (控制台脚本)
  • assets
    • WebpackAsset.php
    • webpack
      • assets-catalog.json -> 由 webpack 生成
      • dist -> 由 webpack 生成
        • js
          • js 打包文件
        • css
          • css 打包文件
      • src
        • app.ts
        • css
          • app.css
  • ...

创建 Webpack 感知资产

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'
    ];

}

生成资产

开发时运行

webpack

或启用文件更改时的自动构建

npm run watch

生产时运行

npm run dist-clean 

将文件添加到您的仓库

当您的资产准备就绪时，您必须确保以下文件已添加到您的仓库

• package.json 节点包管理

• webpack.config.js 运行 webpack 所需

• webpack-yii2.json webpack.config.js 所需，用于定义应用程序入口点和目标目录

• tsconfig.json webpack.config.js 所需，用于处理 TypeScript 文件

• <appdir>/assets/webpack/assets-catalog.json 以让 webpack 感知资产找到 dist 文件

• <appdir>/assets/webpack/dist 保存资产（资产注册时不会动态生成）

• <appdir>/assets/webpack/src 因为您想保留源代码 :-)

文件 webpack-yii2.json 说明

{
    "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"
}

特定于 yii2-webpack 模块

• sourceDir 资产管理的目录的相对路径
• subDirectories 源文件和分发文件的子路径（在 < sourceDir > 中）
• assets 样式和脚本资产子路径（在 < sourceDir >/< subDirectories.dist > 中）
• catalog 资产目录的名称，必须与 WebpackAssetBundle::$webpackAssetCatalog 保持同步

映射到 Webpack 变量

• entry 对象语法入口点 Webpack 入口文档
• commonBundles 显式供应商块 Webpack CommonChunkPlugin 文档
• externals 对象语法 externals Webpack externals 文档
• alias 对象语法 resolve.alias Webpack resolve.alias 文档

允许多个 webpack-yii2.json

如果您的项目需要多个 webpack 配置（注意 manifest.js 冲突），您可以直接在资产目录中创建 webpack-yii2.json。

示例

而不是在根目录中放置 webpack-yii2.json，您可以在资产目录中放置它。

在这种情况下，应用程序结构应如下所示

• index.php
• composer.json
• package.json
• webpack-yii2.json
• webpack.config.js
• tsconfig.json
• protected
  • yii (控制台脚本)
  • assets
    • WebpackAsset.php
    • webpack
      • webpack-yii2.json -> Webpack 特定文件
      • assets-catalog.json -> 由 webpack 生成
      • dist -> 由 webpack 生成
        • js
          • js 打包文件
        • css
          • css 打包文件
      • src
        • app.ts
        • css
          • app.css
  • ...

为了运行此特定配置，

开发时运行

webpack --env.config=protected/assets/webpack

或启用文件更改时的自动构建

webpack --watch  --env.config=protected/assets/webpack

生产时运行

webpack -p  --env.config=protected/assets/webpack

这将使用位于 protected/assets/webpack 的 webpack-yii2.json，其他一切保持不变

贡献

所有代码贡献 - 包括具有提交访问权限的人员的贡献 - 必须通过拉取请求，并在合并之前由核心开发者批准。这是为了确保对所有代码的正确审查。

叉取项目，创建一个 功能分支 ，并向我们发送拉取请求。