README

收集所有 .js, .scss（你可以配置扩展名）文件，并将它们收集到 json 文件中。Webpack 从此文件中消费 json 并进行编译、压缩...

要求

• PHP >= 7.4
• CakePHP >= 4.0
• Webpack >= 4.0（你可以使用较旧的 Webpack，但必须自己配置（webpack.config.js））。

安装

你可以使用 composer 将此插件安装到你的 CakePHP 应用程序中。

安装 composer 包的推荐方法是

composer require grandfelix/cakephp-webpack

加载插件

将以下行添加到 Application.php 中

$this->addPlugin('GrandFelix/Webpack', ['bootstrap' => true, 'routes' => false]);

安装 webpack 配置文件

./bin/cake webpack install

要安装 webpack，请转到应用程序根目录并运行以下命令

yarn

yarn

npm

npm install

全局安装 webpack！ yarn global add webpack-cli 或 npm -g install webpack-cli

使用方法

在每个插件配置文件夹（你想要使用它的地方）中创建 webpack.config.php，并使用以下配置

return [
  'js' => [ // this is alias key!
    'aliasPath' => 'webroot/js', // relative to plugin or main app path
    'resources' => [ // all paths here are relative to aliasPath
      'path/to/somefile.js',
      '/', // this will take all files from aliasPath
    ]
  ],
  'styles' => [ // alias key
    'aliasPath' => 'webroot/styles', // relative to plugin or main app path
    'resources' => [ // all paths here are relative to aliasPath
      'path/to/somefile.scss', // you can also use js... webpack will compile js files and scss files and move them where they should be after compilation
      '/', // this will take all files from aliasPath
    ]
  ]
];

你可以添加任意多的入口点。

运行以下 shell 命令

./bin/cake webpack reload

此命令将在应用程序根目录中创建 webpack.config.json，以便 webpack 可以使用它！

在应用程序根目录中运行以下命令进行开发构建

--watch 选项是可选的

./bin/cake webpack build --watch

生产构建

./bin/cake webpack build --production

在你的视图文件中使用 HtmlHelper 来包含生成的文件，如你所需要

清理源映射文件

在生产构建中，我们会清理 *.map 文件。你可以使用 Webpack.clean_before_build => false 配置选项在你的应用程序配置中禁用此行为（我们不推荐这样做！）。

配置

return [
    'Webpack' => [
        'resources' => [
            'fileExtensionsToSearch' => ['js', 'scss'] // search for file extensions
        ],
        'clean_before_build' => true, // clean *.map files in production build
        'clean_dirs' => [ // folders to clean up in production build 
            WWW_ROOT . 'js/*.map',
            WWW_ROOT . 'css/*.map',
        ]
    ]
];

你可以在主应用程序配置中覆盖这些配置选项。

别名键

编译时的别名键

用于命名编译文件。在这个例子中，webpack 将为 js 资源创建一个在主应用程序 webroot 中的连接文件，如：APP/webroot/js/plugin-name-js.js，并为样式创建 APP/webroot/css/plugin-name-styles.scss

导入/引入文件的别名键

别名键也可以用于导入/引入文件。导入的别名类似于 pluginNameAliasKey，因此你可以在 js 中使用它

import something from 'pluginNameAliasKey/path_to/some_file'

而不是使用完整的路径，这很痛苦。路径相对于资源配置中的 aliasPath。