Laravel Mix & Numbered Assets, Hash instead? - laravel

When I run npn run dev on my Laravel project I get:
Is there any way to change the name of these numbered javascript assets to something unique such as a hash based on contents? They don't seem to have a cache busting hash in the query string when being requested and I have noticed issues from time to time with browsers caching these. Here is my webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
}).version();
mix.extract(['vue', 'jquery']);


This is what I eventually ended up doing and it works well:
mix.webpackConfig({
output: {
chunkFilename: "[name].[chunkhash:8].js",
filename: "[name].js",
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/web.scss', 'public/css/web.css')
.options({
processCssUrls: false,
}).version();
mix.extract(['vue', 'jquery']);

Related

1894 Uncaught ReferenceError: vur is not defined at Module../resources/js/app.js

I'm using laravel and vue , but when i try to load the page, this error appear
app.js:1894 Uncaught ReferenceError: vur is not defined
at Module../resources/js/app.js
my webpack file is:
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
my route file is:
import Home from './components/Home';
import About from './components/About';
export default({
mode:'history',
routes:[
{
path: '/',
component: Home
},
{
path: '/about',
component: About
},
]
})

Check your app.js and index.js files.You may have spelled vue as vur.It's a typo I think.

How to compile assets in laravel nwidart?

In my laravel project I use nwidart.
Each module has its own node_module and webpack.mix.js file. When I run npm run dev on each module, other modules and main vue components does not work and shows this error:
example.js:31589 [Vue warn]: Failed to resolve async component: function () {
return webpack_require.e/* import() */(4).then(webpack_require.bind(null, 44));
}
Reason: TypeError: Cannot read property 'call' of undefined
Here is my Module webpack file:
let mix = require('laravel-mix');
mix.setPublicPath('../../public/');
mix.js(__dirname +'/Resources/assets/js/example.js', 'js/')
.sass(__dirname +'/Resources/assets/sass/example.scss', 'css/');
Main webpack file:
let mix = require('laravel-mix');
require('laravel-mix-merge-manifest');
mix.mergeManifest();
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
How can I fix this?

Laravel Mix one sass to multiple css

When trying this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css/app_blue.css', {
data: '$theme-bg-primary: #1450d9;'
})
.sass('resources/sass/app.scss', 'public/css/app_red.css', {
data: '$theme-bg-primary: #ba0000;'
});
the output from npm is should not contain the item '[...]/app.scss' twice.
How to ouput 2 distincts css from one source as app.scss ?

Instead of injecting your data into the mix call, you need to create a stub scss file for each theme you are creating.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app_red.scss', 'public/css')
.sass('resources/assets/sass/app_blue.scss', 'public/css')
Where those scss files include the base app.scss and overrides that you are injecting with your data value.

Since you are using a different variable values for both css files. You have to call .sass twice but to optimize it further i would suggest you to use variables.
e.g.
const cssSourceDir = 'resources/sass/';
const cssPublicDir = 'public/css/';
const commonSassFile = `${cssSourceDir}/app.scss`;
duplication can be removed like this
mix.js('resources/js/app.js', 'public/js')
.sass(commonSassFile, cssPublicDir+'/app_blue.css', {
data: '$theme-bg-primary: #1450d9;'
})
.sass(commonSassFile, cssPublicDir+'/app_red.css', {
data: '$theme-bg-primary: #ba0000;'
});

function not declared error by using laravel mix

my web pack.mix.js codes are
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
moment: 'moment'
});
mix.js('resources/js/app.js', 'public/js')
.mix.js('resources/js/theme.js', 'public/js')
.mix.js('resources/js/admin.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css')
.sass('resources/sass/admin.scss', 'public/css');
I have this codes in resource/js/theme.js
require('./files/jquery3.3');
require('./files/functions');
require('./files/effect');
I declare some functions in files/functions.js
and use them in files/effect.js
but the browser console gives me this error
Uncaught ReferenceError: 'my_function' is not defined
note: my_function declared in files/functions.js and called in files/effect.js

You need to add file full name i.e. file name + extension
require('./files/jquery3.3.js');
require('./files/functions.js');
require('./files/effect.js');

load jquery-ui-bundle with laravel-mix (webpack)

In 5.2 I was using gulp and I just set this in app.js
window.$ = window.jQuery = require('jquery');require('jquery-ui-bundle');
This doesn't work anymore so I was able to load jquery from webpack.mix.js like this:
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
});
But how do I load jquery-ui-bundle?

Simply put all your JS file and components in resources/assets/js/
and
webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/.....js', 'public/js');
Compile and Run using npm

Resources