README

一个简单的插件，允许在 Webpack 生成的 CSS 和 JavaScript 资产中处理 Craft CMS 模板。

要求

此插件需要 Craft CMS 3.0.0-RC1 或更高版本。它旨在与 Webpack 2 或 3 一起使用。

安装

从您的项目目录使用 composer 安装

composer require la-haute-societe/craft-webpack-assets

Webpack 设置

要生成预期的 JSON 文件，请添加以下 NPM 软件包

yarn add html-webpack-plugin write-file-webpack-plugin underscore-template-loader -D
# Or
npm install html-webpack-plugin write-file-webpack-plugin underscore-template-loader --save-dev

在您的资产源文件夹的某个位置，创建一个包含以下内容的 assets-files.json.tpl 文件

<%= JSON.stringify( htmlWebpackPlugin ) %>

在 Webpack 配置中添加以下插件

{
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'generated-assets-files.json',
            template: 'underscore-template-loader!path/to/templates/assets-files.json.tpl',
            inject: false,
            chunksSortMode: 'dependency'
        }),
        new WriteFilePlugin({
            test:  /generated-assets-files\.json$/,
            force: true,
            log: false
        })
    ]
}

调整 template 的值，以指向先前创建的 assets-files.json.tpl 文件的路径。

最后，像往常一样运行您的 Webpack 进程。

配置

在 Craft 项目的根目录的 config 文件夹中，创建一个包含以下内容的 webpackassets.php 文件，并调整 Webpack 生成的 JSON 路径。

<?php

return [
    'jsonPath' => realpath(__DIR__ . '/path/to/generated-assets-files.json'),
];

用法

在您的 Twig 模板中，您可以按以下方式包含 Webpack 生成的资产

<html>
<head>
    ...
   
    {{ craft.webpackAssets.cssTags() | raw }}
    
    ... Or with chunk name ...
    {{ craft.webpackAssets.cssTags('app') | raw }}
   
    ...
</head>
<body>
...

{{ craft.webpackAssets.jsTags() | raw }}

... Or with chunk name ...

{{ craft.webpackAssets.jsTags('app') | raw }}
{{ craft.webpackAssets.jsTags('libs') | raw }}

...
</body>
</html>

您可以使用 isPublicPathAbsoluteUrl 方法（这是资产由 Webpack 服务的情形）检测提供的公共路径是否是绝对 URL。

如果需要，您可以在运行时覆盖 Webpack 公共路径，当此路径不是绝对路径时

{% if not craft.webpackAssets.isPublicPathAbsoluteUrl() %}
<script>
    runtime_webpack_public_path = '{{ siteUrl }}assets/';
</script>
{% endif %}

由 La Haute Société 提供

la-haute-societe / craft-webpack-assets

维护者

详细信息

README

要求

安装

Webpack 设置

配置

用法