标签: laravel-mix

我将在我的 laravel 项目中安装此管理面板https://coreui.io/（免费版本）。它包含一个具有以下依赖项的 package.json 文件：

    "dependencies": {
    "@coreui/coreui": "^2.1.5",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "1.2.0",
    "@coreui/icons": "0.3.0",
    "bootstrap": "^4.2.1",
    "chart.js": "2.7.3",
    "core-js": "^2.6.1",
    "flag-icon-css": "^3.2.1",
    "font-awesome": "4.7.0",
    "jquery": "3.3.1",
    "pace-progress": "1.0.2",
    "perfect-scrollbar": "^1.4.0",
    "popper.js": "^1.14.6",
    "simple-line-icons": "2.4.1"
  },

因此，我将把这些依赖项放入我的 package.json 中并运行 npm install和npm run dev。我的项目的packaje.json是

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot …

这是我的网页包代码：

...
mix.js('source/_assets/js/main.js', 'js')
    .sass('source/_assets/sass/main.scss', 'css')
    .options({
        processCssUrls: false,
    }).version();

mix.scripts([
    'source/_assets/js/theme/jquery.js',
    'source/_assets/js/theme/plugins.js',
    'source/_assets/js/theme/functions.js'
], 'source/assets/build/js/all.js');

在我的脑海中，我必须<link rel="stylesheet" href="{{ mix('css/main.css', 'assets/build') }}">加载我的样式，并<script src="{{ mix('js/all.js', 'assets/build') }}"></script>在页脚中加载我的脚本。我运行npm run watch并没有收到任何错误，但我的页面是空白的。在我的源代码中，我可以看到两个已编译的文件都正确插入到我的页面中，并且单击后可以查看已编译的代码。

虽然使用 webpack 对我来说是新的，但似乎我已经正确完成了所有操作，但我似乎无法弄清楚为什么脚本没有加载。另一方面，如果我单独对脚本进行硬编码，即<script src="https://www.studiorooster.com/packages/canvas_5/HTML/js/jquery.js"></script>...页面加载正确。谢谢。

Is there a way to change the default minifier that Laravel Mix uses?

By default, it uses 'Terser' (the Webpack default), but I would like it to instead use Closure Compiler (see here).

I have tried various things but have not had any luck yet. This is my latest failed attempt:

mix.webpackConfig({
    module: {
        rules: [
            // ...
        ]
    },
    plugins: [
        // ...
    ],
    resolve: {
        alias: {
            // ...
        }
    },
    optimization: {
        minimizer: [
            new ClosurePlugin({mode: …

我正在寻找一些关于如何设置 Laravel mix 以查找特定阈值大小下的图像资源并将其在样式表中重新编码为 Base 64 字符串的指示。我可以使用 Webpack 来实现这一点url-loader，但我很难让配置在我的 Mix 配置中工作。我尝试过的：

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

mix.setPublicPath('public_html/');
mix.js('resources/uxmaps/js/app.js', 'uxmaps/js/app.js').version()
.webpackConfig({
        module: {
            rules: [
{
                test: /\.(png|jpg|gif)$/i,
                use: [
                  {
                    loader: 'url-loader',
                    options: {
                      limit: 8192,
                        outputPath: 'images'
                    },
                  },
                ],
}
            ]
        }
    })
   .sass('resources/sass/app.scss', 'css/main.css')

编译没有错误，但它根本不起作用；例如，我的 sass 文件中的背景图像background-image: url(/assets/logo.jpg);（3kb）在输出的 css 中保持原样。

其次，我还尝试url-loader根据混合文档将配置部分分离到一个单独的文件（导入的模块）中：https://laravel-mix.com/docs/5.0/extending-mix（请参阅“用法”部分）在底部）。结果相同：编译没有错误，但根本不起作用。

最后，我还尝试使用Post CSS 插件执行此操作，但在编译时它给了我与依赖项版本相关的错误（我认为这现在已经过时了）。

有任何关于为什么此代码无法正常工作的指示，或者任何其他方法可以使用 Laravel mix 将图像转换为内联 Base 64 吗？

谢谢

编辑 我发现我正在使用图像的绝对路径，因此 Mix 根据文档忽略它们。如果我更改为相对路径，则 …

我在 Laravel 中使用 Tailwind CSS 和 VueJS 组件，如下所示。

<template>

</template>

<script>

</script>

<style lang="postcss" scoped>

    .day-disabled {

        @apply text-gray-400;
    }

</style>

然而它抱怨的是

Module parse failed: Unexpected token (685:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> .day-disabled {
|
|     @apply text-gray-400;

无论如何，是否可以@apply使用 Laravel Mix 在 VueJS 组件中使用指令。这是我的webpack.mix.js

const mix = require('laravel-mix');
mix.options({ extractVueStyles: true})
   .js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css', [
       require('postcss-import'), …

I'm using CKEditor 5 in a Laravel project, getting it from a CDN, so initially I have not needed to run npm. But now I need an alignment plugin, so I used Laravel Mix to run npm install, and then copy the plugin to public folder. Like this:

mix.copyDirectory('node_modules/@ckeditor', 'public/@ckeditor');

In my code, I tried to import it:

import Alignment from '/@ckeditor/ckeditor5-alignment/src/alignment.js';

So it threw this error in console

Uncaught TypeError: Failed to resolve module specifier "@ckeditor/ckeditor5-core/src/plugin". Relative references must …

I need to import a file "js" from folder "public" in a vue component.

my Vue component:

<template>
  <div>
    <h2>Hello</h2>
  </div>
</template>
<script>

   import {myplugin} from "/public/vendor/jquery/jquery.min.js";
   export default {
      name: "pageone"
   }
</script>

but i receive an error in compiling phase, can someone help me?

我有一个应用程序，它为应用程序 API 提供可下载的 JavaScript 集成脚本。我希望能够使用与主应用程序前端不同的设置来编译此集成文件。

webpack.mix.js

// Compile js integration
mix.js('resources/js/integrations/FilterIntegration', 'integrations/filter.js');

// Compile the main application
mix.js('resources/js/layout/Root.js', 'public/js/app.js')
    .sass('resources/sass/app.scss', 'public/css')
    .extract(['react', 'react-router-dom', 'lodash']);

我的问题是，此设置实际上将所有以下链接命令应用于每个已编译的文件。这意味着我编译的集成文件还必须使用通过extract命令为主应用程序创建的vendor.js和manifest.js文件，并且它还包含一个sass导入语句，尽管显然集成与样式无关，因为它只是一个 JavaScript 库。