在Webpack Encore中使用copyFiles（）

Question

我正在使用Symfony 4构建应用程序，并且我想关注best practices for web assets。我使用Encore / Webpack for SCSS和JS，它运行良好;生成的JS + CSS很好地存储在/ public / build文件夹中。我坚持如何存储和使用静态资产，如图像，电影，声音。

图片是否应存储在＆＃39; public / images＆＃39;文件夹或资产/图像＆＃39;？

以及一些后续问题：

如果图片存储在public/images中，如果我使用asset('...')来电污染模板，我会获得任何好处吗？

如果图像存储在assets/images中，则：

他们如何通过http进入public/images？ ./bin/console assets:install没有做任何事情，说：＆＃39; [确定]任何捆绑都没有提供任何资产。＆＃39; 。
如何在SCSS中使用它们？通过相对路径？

此致

Answer 1

图像是否应存储在＆＃39; public / images＆＃39;文件夹或资产/图像＆＃39;？

public/中的所有内容都可以通过浏览器获得。在这里，只应该生产准备和建造的东西。由于您的图片不需要任何处理（我假设），您可以（应该）确实将图像放在那里。

现在，假设您需要进行一些处理（例如丑陋的JPEG压缩），您可以将图像放在assets/中，进行一些处理，然后只将处理后的图像放入{{1} }。

如果图像存储在公共/图像中，如果我使用资产（＆＃39; ...＆＃39;）电话污染模板，我会获得任何好处吗？

是的，public/与Encore或资产构建管理没有任何关系。它唯一能做的就是修复您的网址。这意味着，如果您将应用移动到服务器上的子目录（asset()），URL将自动适应。请在Asset component文档中了解有关它的更多信息。

Answer 2

Symfony 4中使用asset()方法引用图像的另一种好方法是在使用Encore构建资产时在public/build中复制图像。

在Webpack Encore中使用copyFiles（）

Webpack Encore提供了将图像复制到公共目录中的功能，以允许asset()访问那些文件：copyFiles()。

在您的webpack.config.js

Encore.
...
.copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
        pattern: /\.(png|jpg|jpeg)$/
    })

错误：Encore.copyFiles不是公认的属性或方法。

请确保您确实使用symfony/webpack-encore-bundle，而不是 symfony/webpack-encore-pack，如here所述。

composer require symfony/webpack-encore-bundle
composer remove symfony/webpack-encore-pack
yarn install
yarn upgrade
yarn run watch

我的package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.22.0",
        "bootstrap": "^4.1.3",
        "node-sass": "^4.10.0",
        "sass-loader": "^7.0.1",
        "url-loader": "^1.0.1",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

Answer 3

在
之后编辑webpack.config.js
再来一次 .setOutputPath（'../ build /'）

添加以下行。您还可以通过取消注释行来进行更多配置

.enableVersioning()
.copyFiles({
 from: './assets/images',

 // optional target path, relative to the output dir
 to: 'images/[path][name].[ext]',

 // if versioning is enabled, add the file hash too
 //to: 'images/[path][name].[hash:8].[ext]',

 // only copy files matching this pattern
 //pattern: /\.(png|jpg|jpeg)$/
})

现在您可以使用图片了

来源：https://symfony.com/doc/current/frontend/encore/copy-files.html 详细信息：http://toihid.com/?p=332

如何在Symfony 4中处理资产

3 个答案:

在Webpack Encore中使用copyFiles（）

错误：Encore.copyFiles不是公认的属性或方法。