使用 Copy 或 Copy Directory 的 Webpack 混合版本文件答案

【问题标题】：Webpack mix verion files that use Copy or CopyDirectry使用 Copy 或 Copy Directory 的 Webpack 混合版本文件
【发布时间】：2018-03-24 13:52:05
【问题描述】：

Laravel Mix 版本：1.4.5
节点版本：v6.10.2
NPM 版本：3.10.10
操作系统：windows 10 xampp

说明：

使用 copy/copyDirectory 和 {{ mix() }}

时未定义索引

复制步骤：

在资源中创建2个文件夹

/css/afolder/afile.css

/css/another/anotherfile.css

使用以下内容复制文件夹：

`mix.copy('resources/assets/css/', 'public/css', false);`

或

`mix.copyDirectory('resources/assets/css/', 'public/css');`

文件复制得很好，但是在使用时

`{{ mix('css/afolder/afile.css') }}`

或

`{{ mix('css/anotherfolder/anotherfile.css') }}`

它返回

未定义索引：css/afolder/afile.css

未定义索引：css/anotherfolder/anotherfile.css

文件夹存在：

public/css/afolder/afile.css
public/css/anotherfolder/anotherfile.css

Mix manifest 只显示以下内容

{
    "/js/app.js": "/js/app.js?id=0eaf1649511b8f1c3fd9",
    "/css/app.css": "/css/app.css?id=a86d86d0b7edd1152cc6"
}

完整的 webpackmix 文件

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js');

mix.copy('resources/assets/js/', 'public/js', false);

mix.copy('resources/assets/css/', 'public/css', false);

mix.sass('resources/assets/sass/app.scss', 'public/css');

mix.version();

【问题讨论】：

这看起来像一个错误报告模板。你确定你在正确的地方发帖了吗？
在这里查看我的答案stackoverflow.com/a/47375271/746347

标签： laravel-5 webpack

【解决方案1】：

Webpack mix 不适用于 copyDirectory()。

以下是将复制目录中的所有文件添加到清单的解决方案：

webpack.mix.js

let mix = require('laravel-mix');

mix.copyDirectory('resources/sourceDir/', 'public/destinationDir');

mix.version([
  'destinationDir/**'
])

【讨论】：

【解决方案2】：

Webpack 不会对 copy() 或 copyDirectory() 方法下的文件应用版本。因为它们在 webpack 构建之外独立运行。

如果你只是复制它们，你应该像简单文件一样使用这些文件，而不是在版本之下。

<link rel="stylesheet" href="{{ asset('css/afolder/afile.css') }}">

mix.version() 将自动对任何已编译的 JavaScript、Sass/Less 或组合文件进行版本控制。但是，如果您还想在构建过程中对额外文件进行版本控制，只需将路径或路径数组传递给方法，如下所示：mix.version(['public/js/random.js']);

【讨论】：