So I am using Laravel-Mix and have set up code splitting in Webpack. I am using a dynamic import for my Vue components like this.
Vue.component('UserMenu', () => import('./components/UserMenu.vue'));
Since I am also using Babel, I have the syntax-dynamic-import plugin loading from my .babelrc file in the project root.
This is all working fine, and Webpack is properly splitting the code on build. However, the problem is, it is putting the chunks in the public root rather than in public/js
If in my webpack.mix.js I do...
mix.js('resources/assets/js/app.js', 'public/js');
...then the mix properly places the built file in the /js directory.
But in order to chunk the files, if in webpack.mix.js I do...
mix.webpackConfig({
entry: {
app: './resources/assets/js/app.js',
},
output: {
filename: '[name].js',
publicPath: 'public/js',
}
});
...all the chunks get put in the public root no matter what I assign to the publicPath property.
Any idea what am I missing here?
Try to set public path using mix.setPublicPath('public/build') method.
just change the chunk path in webpack.mix.js under your laravel root folder,
mix.webpackConfig({
output: {
filename:'js/main/[name].js',
chunkFilename: 'js/chunks/[name].js',
},
});
also note that the laravel way of changing main js location is using mix.js function
mix.js('resources/assets/js/app.js', 'public/js/main')
Related
Given the webpack.mix.js of a fresh Laravel project :
const 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/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
What is the equivalent using just webpack and a webpack.config.js? (Im looking to remove laravel mix as a dependency on an existing project.)
I did find this default file in the source but it did not help me. Is there a way I can see the "compiled/resulting" webpack configuration or a template/starting point that corresponds to laravel mix default settings?
You can, but the result is not very satisfactory.
Create a JS script with this:
console.log (JSON.stringify(
require('./node_modules/laravel-mix/setup/webpack.config.js'), null, 4)
);
and save it in the root folder of your laravel project. Run it with Node and the output will be the configuration object Laravel Mix receives and inputs to webpack.
However, this file is very long and covers a vast amount of settings, which you wouldn't need if you made your file from scratch. Yes, you could try and remove every extra setting you think you can remove without breaking your output, but in the end it's better to learn how Webpack works so you can write better, mode adjusted configs. At least you can use it to understand how it does certain things.
Just put into webpack.mix.js
Mix.listen('configReady', function (config) {
RegExp.prototype.toJSON = RegExp.prototype.toString;
console.log(JSON.stringify(config));
});
So you will get webpack config from your laravel.mix.
With recent laravel-mix you just need to invoke mix.dump() (in the webpack.mix.js script).
The file you referenced seems to point exactly to the default configuration. Why did this not help?
In order to migrate you could
Learn the basics
Extract the dependencies from Laravel mix aÇıd add them to your package.json
Hint: The dependencies there are your devDependencies
Start by installing npm install --save-dev everything "webpack", "babel" and prefixed with "-loader".
If you need Sass and extracted css - npm install --save-dev node-sass sass-loader mini-css-extract-plugin.
Minimal example of a webpack config for your mix example from above would be
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './resources/js/app.js',
output: {
filename: 'js/[name].js',
path: path.join(__dirname, 'public')
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
],
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
'sass-loader'
]
}
]
}
};
Learn the more advanced basics for your use case
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
I am struggling with webpack. I want to have the compiled files in public-cdn folder. However, the following code creates files in several different locations. Including E:\cdn. Chunks, app.js, css files - everything in different location.
Paths:
main folder: www/Project
laravel public: www/Project/public
cdn folder: www/Project/public-cdn
webpack.mix.js
mix.webpackConfig({
output : {
path : '/public-cdn/',
publicPath : 'http://cdn.ywg.localhost/',
chunkFilename : 'js/[name].js'
},
});
mix.sass('resources/assets/sass/styles.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.sass('resources/assets/sass/invoice.scss', '../public-cdn/css')
.options({processCssUrls: false
});
mix.js('resources/assets/js/frontApps.js', '../public-cdn/js')
.extract(['vue']);
I tried experimenting with Path and PublicPath parameters. PublicPath doesn't seem to work at all.
After some more experimenting, I think I found a solution. The issue might be caused by laravel mix which set's the "public" folder.
I added:
mix.setPublicPath('public-cdn/');
and it seems to be working well now.
I'm trying to use a theme which I bought from themeforest with Laravel
I have already use mix.copy to move my fonts from node_modules to my public dir, this works fine./
However when I include the following lines in my webpack.mix file,
mix.less('node_modules/elite-theme/eliteadmin-dark/less/style.less', 'public/css', './');
I get the following errors
Any idea what I am doing wrong here?
Never mind seems like this is doing the trick
mix.options({
processCssUrls: false
});
Set to false to take urls as they are