How to migrate from laravel mix to pure Webpack? - laravel

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

Related

With laravel mix in a laravel vue project how can I include scss files across all components?

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();

Laravel-mix Webpack Public Path

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')

Setup Laravel Mix with SASS and PostCSS critical CSS splitting

I want to setup Laravel Mix with mix.sass AND PostCss Critical CSS splitting. In the end I want two files: app.css and app-critical.css.
Unfortunately I can get this to work. One of the setups (webpack.mix.js) I did try:
mix
.js('templates/src/js/app.js', 'web/assets/dist/')
.js('templates/src/js/home.js', 'web/assets/dist/')
.extract(['vue','axios','lazysizes','svgxuse', 'fontfaceobserver'], 'web/assets/dist/vendor.js')
.sass('templates/src/scss/app.scss', 'web/assets/dist/')
.sourceMaps()
.options({
postCss: [
require('postcss-critical-css')({
preserve: false,
minify: false
})
]
})
.browserSync({
proxy: '127.0.0.1:8080',
files: [
'templates/**/*.twig',
'templates/src/js/**/*',
'templates/src/scss/**/*'
]
});
if (mix.inProduction()) {
console.log("In production");
mix.version();
}
When I run the script via 'npm run watch' I get an error:
10% building modules 0/1 modules 1 active ...ign-tools/templates/src/scss/app.scssWithout `from` option PostCSS could generate wrong source map and will not find Browserslist config. Set it to CSS file path or to `undefined` to prevent this warning.
Also, my file is just copying over all the critical styling. The file grows bigger and bigger, expanding the duplicate code everytime the input SCSS/CSS-file changes.
I did try to set up Laravel Mix + mix.sass + one of the following plugins:
https://github.com/zgreen/postcss-critical-css
https://www.npmjs.com/package/postcss-critical-split
Without success :(
Anybody with a working setup or link to an example repository?
Thanks,
Teun

Webpack mix verion files that use Copy or CopyDirectry

Laravel Mix Version: 1.4.5
Node Version: v6.10.2
NPM Version: 3.10.10
OS: windows 10 xampp
Description:
Undefined index when using copy/copyDirectory and {{ mix() }}
Steps To Reproduce:
Create 2 folders in resources
/css/afolder/afile.css
/css/another/anotherfile.css
Copy the folders with the following:
`mix.copy('resources/assets/css/', 'public/css', false);`
or
`mix.copyDirectory('resources/assets/css/', 'public/css');`
The files are copied fine, but when using
`{{ mix('css/afolder/afile.css') }}`
or
`{{ mix('css/anotherfolder/anotherfile.css') }}`
It returns back
Undefined index: css/afolder/afile.css
Undefined index: css/anotherfolder/anotherfile.css
The folders exists:
public/css/afolder/afile.css
public/css/anotherfolder/anotherfile.css
Mix manifest just shows the following
{
"/js/app.js": "/js/app.js?id=0eaf1649511b8f1c3fd9",
"/css/app.css": "/css/app.css?id=a86d86d0b7edd1152cc6"
}
Full webpackmix file
let 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/assets/js/app.js', 'public/js');
mix.copy('resources/assets/js/', 'public/js', false);
mix.copy('resources/assets/css/', 'public/css', false);
mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.version();
Webpack does not apply version on files under copy() or copyDirectory() methods. Because they runs standalone, outside of webpack build.
If you just copy them, you should use this files like as simple file, that are not under version.
<link rel="stylesheet" href="{{ asset('css/afolder/afile.css') }}">
The mix.version() will automatically version any compiled JavaScript, Sass/Less, or combined files. However, if you'd also like to version extra files as part of your build, simply pass a path, or array of paths, to the method, like so: mix.version(['public/js/random.js']);
Webpack mix doesn't work with copyDirectory().
Below is a solution that adds all files from the copied directory to the manifest:
webpack.mix.js
let mix = require('laravel-mix');
mix.copyDirectory('resources/sourceDir/', 'public/destinationDir');
mix.version([
'destinationDir/**'
])

How to #import external SCSS properly with webpack and Vue.js?

As in Material Component Web's example, I want to be able to import SCSS from my node_modules like this:
#import '#material/elevation/mdc-elevation';
However, I'm getting this error message when trying to run the webpack build:
File to import not found or unreadable: #material/elevation/mdc-elevation.
#import './~/#material/elevation/mdc-elevation.scss'; doesn't work either.
I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.
What did they do in Material Components Web's Vue.js example in order to make it work?
Here's my npm-debug.log in case you need it.
And here's the corresponding Git repository: sk22/spg-tinf-sem03/proj01
Thanks in advance!
Edit: I want to be able to import the scss files, not the compiled css.
Got it.
here's a part of my webpack 2 config's module.rules:
{
test: /\.(sass|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
includePaths: [path.resolve(__dirname, 'node_modules')],
},
},
],
},
So what did I do wrong?
My options object was placed in the rule directly, not the loader.
The old webpack config rule looked like this:
{
test: /\.(sass|scss)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},
See the difference? Instead of the 'sass-loader' string, I extended it to an object, containing the loader name and the options object, because the options only apply to the sass-loader.
(You could also drop the path.resolve and only write 'node_modules', but it might be safer to leave it.)
Check out this documentation page for further information. https://webpack.js.org/configuration/module/#rule-use
Without that loader, you must prefix each import with a ~, which webpack converts to the node_modules folder, at least with my previous configuration.
But this will break 3rd party SCSS frameworks like Material Components Web, because they use #import statements without a leading ~ themselves, for example here.
Inside .vue files
This will not work in .vue files, as vue-loader just uses sass-loader without any options by default.
So if you want that to work, you probably need to make use of vue-loader's own options, as described in its documentation.
(I'm unable to get it to work for some reason I don't know...)
EDIT: Webpack has a section on sass-loader now: https://webpack.js.org/loaders/sass-loader/ also mentioning includepaths.
I had the same issue with #material and Vue. I managed to resolve the problem without adjusting the use property directly.
Solution
Step 1: First create a default Vue 2.1 project using the CLI.
Your file structure will have a ./build directory.
Step 2: Open the file 'utils' you will see a cssLoaders() function which returns an object/map for the languages vue-loader supports.
You will see both sass and scss in that map.
Step 3: Change the values of sass and scss to:
sass: generateLoaders('sass', {
indentedSyntax: true,
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
scss: generateLoaders('sass', {
includePaths: [path.resolve(__dirname, '../node_modules')]
}),
Step 4: Go to the .vue file you're using and change the lang attribute in your <style> element to either sass or scss.
Step 5: After you've done that go to the terminal/console and install sass-loader with:
npm install sass-loader node-sass webpack --save-dev
Step 6: Then run npm run dev and it should work.
Why does this work?
Libraries
I dug around a bit and it turns out sass-loader uses node-sass which has some options such asincludePaths one mentioned by #22samuelk. IncludePaths tells node-sass or rather the underlying library LibSass to include sass files from that directory/path.
Vue
Sass-loader options
By default Vue expects your assets to be in your projects src/assets folder (correct me if I'm wrong). You can however use ~ to indicat you want to start at your projects root which would look like `~/node_modules/#material/smth/mdc-smth.scss.
Now if you want your sass-loader to use something other than those options you need to explicitly tell them.
Hence path.resolve(__dirname, '../node_modules' since the utils file is in ./build and you need to use an absolute path for sass-loader to understand where to look.
Vue-loader config
This is not really specific to the question but the vue-loader config defined in vue-loader.conf.js works as follows:
It uses the map returned by cssLoaders() to build the loaders expected by webpack.
The returned map ({key:value}) is then used by providing key as a file extension used in test: for a loader object. The value is used as the loader object.
Which would like like this:
{
test: /\.(key)$/,
use: [
{
loader: '//ld//-loader',
options: {
/*Options passed to generateLoaders('//ld//', options)*/
},
},
],
}
Where key is the file extention. In this case that would be either sass or scss. And //ld//is the loader you which to use. Which is shown in Step 3 as 'sass'.
Hopefully this clears up some stuff. Took me a while because I just started using Vue.

Resources