laravel-mix

I'm trying to build a PWA for my app; and have spent almost 48 hours trying to figure out how to make use of Workbox with Laravel Mix. What's ironical is that Google says Workbox is meant to make things easy! Buh! Okay, so far I've figured out that - I will need to use the InjectManifest Plugin because I want to integrate Push notifications service in my Service Worker I have no clue how to specifiy the paths for swSrc and swDest . What code should go into my webpack.mix.js and whether I should have a temporary service-worker inside my resources/js folder to create a new service worker inside

My Laravel Mix app will be placed in a subdirectory on the server like: http://localhost/pat-os-server/public/ An image's path in my vue component compiles from <img id="logo" src="../assets/img/pat_logo.png"> To <img id="logo" src="/images/pat_logo.png"> Now the image is not shown due to the subdirectory the app is in. The correct path should be either images/pat_logo.png (relative - prefered) or /pat-os-server/public/images/pat_logo.png (absolute) I've tried to set the output path in webpack.mix.js like this: mix.setPublicPath('/pat-os-server/public/'); mix.setResourceRoot('/pat-os-server

I am currently in the process of diving into Laravel Mix and so far, whilst I fully understand what Laravel Mix is and how it works, I am trying to understand a little more about the common practices and 'How-Tos'... For instance, consider this file structure: /resources/assets/js/app.js (all global functions) /resources/assets/js/index/index.js (functions specific to index.js) /resources/assets/js/about/about.js (functions specific to about.js) /resources/assets/js/contact/contact.js (functions specific to contact.js) Now, ideally, I would like the following combined and minified in the

In Laravel 5.4 Mix was introduced to compile assets and maintain the asset pipeline. Mix defaults to your public directory being named public . In many cases, including mine, my public directory is called something else. In my case, it's public_html . How can I change the public directory where assets are compiled to? I have tried changing the paths within webpack.min.js to: mix.js('resources/assets/js/app.js', 'public_html/assets/js') .sass('resources/assets/sass/app.scss', 'public_html/assets/css'); Unfortunately this compiles to: - public |- _html |-- assets |--- css |--- js |- fonts In

How should I include webpack plugins if I use WebPack AND Laravel Mix? I am confused which file I add the plugin code into. My below attempt doesn't seem to be running my plugin. The plugin should be compressing the js, css files but its not. webpack.config.js : require('./node_modules/laravel-mix/src/index'); require(Mix.paths.mix()); // My plugin is here const CompressionPlugin = require('compression-webpack-plugin'); Mix.dispatch('init', Mix); let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig'); module.exports = new WebpackConfig({ plugins: [ new

For my admin panel I extract all the assets including the manifest-json.js to mix.setPublicPath(path.normalize('public/backend/')) . All the files get correctly added to the backend folder, and the manifest-json.js file looks as follows: { // all correct here "/js/vendor.js": "/js/vendor.js", "/js/app.js": "/js/app.js", "/css/app.css": "/css/app.css", "/js/manifest.js": "/js/manifest.js" } the problem is that when using {{ mix('backend/css/app.css') }} in my blade-files, it looks in public/manifest-json.js instead of looking for it in backend/manifest-json.js . How can I make sure the right

I have been trying to setup laravel mix on my project and followed the install guide on the laravel website however keep getting errors. My package.json file is { "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules", "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules", "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot", "production": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "devDependencies": { "axios": "^0.15.2", "bootstrap-sass": "^3.3.7", "jquery": "^3.1.0",

I would like to use inline js in my less files but I get the following message: Inline JavaScript is not enabled. Is it set in your options? How can I enable that? I had same problem, I use webpack with less loader, I needed to add javascript option in less loader config: { test: /\.less$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { javascriptEnabled: true } }] } I found in the sourcecode of less compiler: https://github.com/less/less.js/blob/3.x/bin/lessc that they parse js less option in this way: case 'js': options.javascriptEnabled =