Laravel mix 在公共目录下而不是默认目录下的不同目录中发布图像和字体

Question

我正在使用 laravel mix，它使用 webpack 作为捆绑器来编译 js、scss 和其他资源，如字体、图像等..

为了让 mix 将其发布到公共目录，我使用以下 webpack 配置。我为图像和字体分配了

asset/resource

类型，并尝试设置输出的

assetModuleFilename

选项和资源规则

generator

，但没有成功。

generator

文件名当然会在这里抱怨多次在图像文件夹中发布图像，因为如果我删除那里的评论，混合也会发布在那里。

assetModuleFilename

选项有效，但除此之外，静态图像无论如何都会进入图像文件夹，我无法以某种方式阻止 Laravel mix 如何控制这些东西。当文件名是大写时它也会抱怨。

mix.webpackConfig(webpack => {
    return {
        output: {
            // ...
            // assetModuleFilename: (pathData) => {
            //     console.log( pathData.filename);
            //     const filepath = path.dirname(pathData.filename).split('/').slice(1).join('/');
            //     return `${filepath}/[name][ext]`;
            // },
        },
        module: {
            rules: [
              {
                test: /\.html$/i,
                type: 'asset/source',
              },
              {
                test: /\.(ttf|woff|woff2|eot|svg)$/,
                exclude: /node_modules/,
                type: 'asset/resource',
                generator: {
                  filename: '[name][ext]'
                }
              },
              {
                test: /\.(jpg|png|svg|gif)$/,
                exclude: /node_modules/,
                type: 'asset/resource',
                // generator: {
                //   filename: '[name][ext]'
                // }
              },
            ]
          },
    }
})

我想在将图像发布到公共目录中的图像（或任何目录，因为我无论如何不希望它在图像下）目录后获取图像路径。在我的本地文件夹设置中，我也使用 webpack，当我从像这样的任何地方导入图像时，我直接获取图像发布路径

// background is eventual path to the published directory with host protocol and name which 
// can be used directly in browser
import background from '../images/backgrounds/background.png';
console.log(background) 

但是，这里使用混合，

background

指的是整个文件夹的路径仅相对于根目录，即编译前的Module/somemodule/resources/assets/images/backgrounds/background.png，我觉得很奇怪，因为它应该是最终的路径，可以直接在浏览器中使用。

另外，我不想做类似

mix.copy(src, dest)

之类的事情，因为我觉得这不是 webpack 的正确方法。

我有两个问题

1. 如何不发布或阻止

   fonts

   和

   images

   又名资产到其默认目录，并将它们放入公共下的自定义其他目录中？
2. 当我像这样导入我的资产时，我应该获得我的资产的最终发布路径（在 javascript 中而不是在 html 中）。有没有可用的默认混合功能？？

Answer 1

要自定义 Laravel Mix 中资源的输出目录，可以使用

setPublicPath

方法。此方法允许您为编译的资源指定不同的目录。这是一个例子：

mix.setPublicPath('path/to/public')
   .js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

在此代码中，

path/to/public

是您希望放置已编译资源的目录。

但是，Laravel Mix 不提供内置方法来更改单个类型的资源（如图像或字体）的输出目录。如果您需要这种级别的自定义，您可能需要手动配置 Webpack，这超出了 Laravel Mix 的范围。

关于你的第二个问题，当你在 JavaScript 中

import

一张图像时，Webpack 将返回图像在输出目录中的最终路径。但是，这需要配置

file-loader

或

url-loader

来处理图像文件，默认情况下 Laravel Mix 中不包含该功能。

如果您想在 JavaScript 文件中导入图像并获取其最终路径，您可能需要扩展 Laravel Mix 的 Webpack 配置以包含处理带有

file-loader

或

url-loader

的图像文件的规则。但是，这可能很复杂，并且可能没有必要，具体取决于您的用例。更简单的方法可能是使用 Laravel 的

asset

辅助函数为 Blade 模板中的资源生成 URL。