How to use laravel mix in WordPress for webpack

Home / News
How to use laravel mix in WordPress for webpack

Why important to use a laravel mix?

laravel mix webpack is a complete webpack solution of any application. Which is using several common CSS, javascript, pre-processor, and libraries. We will give you some examples like if you went to use a Sass than you need a software or generator to build a CSS file. But you can make it easy for a single line preconfigured setting and you will get a life easier solution. Official Documentation

Need to some initial configurations

  • Install nodejs Download here
  • Goto your directory where your theme/plugin. like wp-content/theme/onepage.
  • Open command line like(Command Promot, powershall or other). It will depend on your operating system.
  • Write command like this cd folder-name. (Example: File location C:\xampp\htdocs\Portfolio\wp-content\themes\onepage> ctrl+shift then right click-> open powershall window here. Then click it. Open a powershall).
  • Run this command npm init -y after create a package.json file.
  • Run this command npm install
  • Check version node -v and npm -v
  • When npm install complete after create a file node_modules.  All packages include here.

File structure

laravel mix webpack-File Structer

Important Point here:

  • assets
  • node_modules
  • package.json
  • webpack.mix.js

Package.json structure

laravel mix-Package. jason Structure

Important Point Here:

  • Scripts(you can get this scripts here).
  • devDependencies( Its depends on your project.)

laravel mix webpack Configuration

According to laravel mix Install Process .

npm install laravel-mix --save-dev
webpack.mix.js configuration
let mix = require('laravel-mix');
mix.js('assets/src/app.js', './assets/js')
	.sass('assets/src/app.scss', './assets/css')
   	.setPublicPath('./assets');

Details:

1. mix.js(convert js file), mix.sass(convert sass file into css) and  mix.setPublicPath( root path ).

2. Javascript and sass file store assets>src folder. We write a code in this files. When we build it than convert two file as below locations. We write a scss code but build it pure css.

a. assets>js (same name as mix file)

b. assets>css (same name as mix file)

 

Details:

assets under files

  •  src ( laravel mix file which we write code after generate solid code. )
  • css ( Generate css file here. )
  • js ( Generate js file here. )
  • mix-manifest.json(dump file)
Details :
  • assets>src (Which are store two files app.js and app.scss. We write code in this files). Generate two files as below.
  • assets>css ( app.css ).
  • assets>js (app.js).

How to run laravel mix?

// run all mix task
1. npm run dev

// run all mix task with minified.
2. npm run production

Common Errors

When you install node and laravel mix then need to handle different environments.
1. npm install cross-env --save-dev
Another need to scripts for your package.json file.
"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",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Laravel mix has many functions

Laravel mix has lots of functions. We will describe another important function which is so necessary. We have faced this type of problem regularly. Like, we have multiple CSS files but we need to all CSS file stores in a single CSS file. Because we will optimize our CSS file for an increase in our website performance. We will write code like this: 
mix.styles([
    'assets/css/vendor/bootstrap.css',
    'assets/css/vendor/animate.css'
], 'assets/css/all.css');
It means all.css file whole data stored. You can visit this link for Details.

We will help you, any time just contact us.

Leave a Comment