问题标签 [laravel-mix]

我正在使用 Laravel 5.4 和 Mix 来构建我的 CSS/JS 文件。

这是我完整的 webpack.mix.js 文件：

出于某种原因，JS 块和 CSS 文件的版本控制正确，但我的 app.js 不是。显然，这会导致我的 web 应用出现各种与缓存相关的问题。

我试过了 ：

• 添加文件名作为 version() 的参数
• 删除清单

但没有运气。任何提示将不胜感激。谢谢 ！

这就是技术令人讨厌的地方。3 天前，我从 Laravel 5.3 升级到 Laravel 5.4。尽管 Laravel 文档提供了一个糟糕的升级指南，但我完全发现我必须迁移Gulp到Webpack（我不熟悉）。

已经 2 天了，我仍在搜索 Webpack 以了解如何完成以前如此简单的工作。那里没有任何明确的注释。即使我无法理解对于具有如此多样式和脚本的网站而言，最佳实践是什么。

抱歉唠叨了这么多。我真的很困惑。

假设我有 15 个 CSS 文件，分为两部分。其中 5 个是在用户和管理面板中使用的通用文件，并且两个面板都有 5 个特定文件。JS 文件的结构相同。

还希望使用长期缓存，同时避免渲染阻塞 JavaScript 文件（异步/延迟）。

使用 Gulp，我可以轻松地将所有样式和 JavaScript 合并到 3 个包中。异步它们非常简单，而且长期缓存也可以。

使用 Webpack如果我使用mix.js()长期缓存是可以的，但我不能异步加载它们，因为 Webpack 有它自己的引导程序。

如果我使用mix.scripts()or mix.combine()，我可以异步加载脚本，但现在npm run watch不会关注这些 javascript 文件中的更改。

我更喜欢使用 Laravel 的建议，但这真的很烦人。我在哪里可以找到由 Laravel 5.4 和 Laravel Mix 实现的网站的简单示例？

我看过JeffreyWay的例子，但那是非常基本的，与真正的网站相去甚远。

所以我有这个css文件。在 vagrant box 中执行import style和运行时，我收到以下错误：npm run dev

错误无法编译，出现 16 个错误 2:54:39 AM

我已经在rappasof/laravel-5-boilerplate上的 master 分支上克隆了代码，并且能够npm install在npm run dev. 它确实会处理 scss 文件，因为它会生成字体文件，但不会生成 css 文件。

我正在运行：

• 视窗 10 x64
• 节点.js 8.1.0
• npm 5.0.3

这是来自的输出npm run dev：

没有发出 css 文件！

我在 apache 上使用 laravel，所以我在资产 url 上遇到错误，因为它们是绝对来自根目录的，因为http://localhost:8000/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e我需要的是http://localhost:8000/my-project/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e.

经过一番挖掘，我发现如果我mix.setResourceRoot('/my-project/');在webpack.mix.js文件中添加，我可以正确生成指向资产的链接，但我无法让 Laravel Mix 输出更正后的 css 文件。

我该如何解决？

我正在使用 Laravel 5.4，我希望使用 Laravel mix 进行资产编译。我已按照安装节点和 npm 所需的步骤进行操作。

下面是我在命令行上 运行node -v和npm -v的结果。

因此我安装了node和npm。

我采取的下一步是导航到我的项目文件夹并运行

npm intall --no-bin-links

正如文档中为 Windows 用户推荐的那样，以下是我得到的结果

现在已经有好几个小时了。可能是什么原因？有谁之前经历过这个吗？

我在Apache 服务器上运行它。

这是我的内容/laravel/webpack.mix.js：

的内容/resources/assets/js/jquery.js是：

的内容/resources/assets/js/plugin.js是这样写的本地代码：

当 plugin.js 脚本在本地编写时（如上），它在 my_app.js 中的jQuery 之前加载（例如plugin.js THEN jQuery）

但

当我直接从node_modules**中提取带有“require”或“import”指令的plugin.js时，例如require('plugin')用plugin.js编写，顺序是好的： 首先加载jquery.js然后 plugin.js。

我的问题：

我想在 plugin.js 之前加载 jquery.js。

那么，即使 plugin.js 是本地脚本，如何尊重订单呢？

我想在 Laravel Mix 编译中使用sparksuite/simplemde-markdown-editor 。

我在app.scss添加了这一行：

@import "node_modules/simplemde/dist/simplemde.min.css";

和app.js中的这一行：

window.SimpleMDE = require('simplemde');

我想在我的项目中编译这个插件......

我正在尝试使用 laravel mix 来编译和缩小文件，如果我运行 npm run dev 一切正常但是运行 npm run production 给我这个：

我不知道这实际上意味着什么，所以我只是发布了所有内容，我的 webpack 文件如下所示：

所以 laravel mix 命令 mix.copy 似乎可以优化图像但是，我需要完全相同的文件结构中的图像，所以我在公共目录中有图像文件夹，我想运行 mix.copy 来优化图像并保持它们相同目录，但是此时当我运行它时，它会删除第一个图像并引发错误：

错误：ENOENT：没有这样的文件或目录，打开 'C:\xampp\htdocs\laravel\public\images\default.gif'

该文件在运行 npm run prod 之前就在那里

我的 Laravel Mix 应用程序将放置在服务器上的子目录中，例如：http://localhost/pat-os-server/public/

我的 vue 组件中的图像路径编译自

至

由于应用程序所在的子目录，现在图像未显示。正确的路径应该是images/pat_logo.png（相对 - 首选）或/pat-os-server/public/images/pat_logo.png（绝对）

我尝试在 webpack.mix.js 中设置输出路径，如下所示：

但这不会改变输出路径。它仍然是/images/pat_logo.png。我希望它现在是/pat-os-server/public/images/pat_logo.png。对 setPublicPath 和 setResourceRoot 使用其他值（包括“/”和“”）不会造成任何差异。

我已经在调用其他方法之前放置了路径设置方法，所以我当前的 webpack.mix.js 看起来是这样的：

如何获取图像的相对输出路径或更改绝对路径？

谢谢你的支持。

编辑

我刚刚意识到，在我的 laravel 项目中创建了一个子文件夹“pat-os-server”，并且所有编译的项目文件都复制到了这个子文件夹中。所以看来我误解了 setPublicPath 设置。

我不想将输出文件放入另一个文件夹。我希望我的项目中的 URL 指向正确的路径，它不是主机/根目录，而是一个子目录。