How to Use Laravel Mix in Non-Laravel Projects

This tutorial demonstrates how to leverage Laravel Mix, a streamlined Webpack API wrapper, for asset compilation in projects outside the Laravel framework. This approach significantly accelerates project setup by eliminating the need for extensive Webpack configuration.

Key Advantages:

• Simplified Asset Compilation: Laravel Mix simplifies the complexities of Webpack, making asset processing (JavaScript, CSS, etc.) much easier.
• Rapid Project Setup: Spend less time configuring build tools and more time building your application.
• Webpack Configuration Not Required: Laravel Mix handles the Webpack configuration for you, eliminating the need for a separate webpack.config.js file.

Prerequisites:

• Node.js and npm: Essential for running Laravel Mix. Verify installation with node -v and npm -v.
• PHP and Composer (Optional): Required for versioning and hot reloading features. Homestead Improved provides a convenient pre-configured environment.
• Basic JSON and Terminal Familiarity: Understanding of basic command-line operations is helpful.

Installation and Setup:

1. Project Initialization: Create a new project directory.

2. Install Dependencies: Use npm to install Laravel Mix, cross-env (for cross-platform environment variables), and node-sass (for SASS compilation):

   <code class="language-bash">npm install laravel-mix cross-env node-sass --save-dev</code>

3. Create webpack.mix.js: In your project's root directory, create webpack.mix.js with the following:

   <code class="language-javascript">const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');</code>

4. Update package.json: Add the following scripts to your package.json file:

   <code class="language-json">"scripts": {
     "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },</code>

5. Create Asset Files: Create the resources/js/app.js and resources/sass/app.scss files as specified in webpack.mix.js. Add some sample content (e.g., CSS styling in app.scss).

6. Run Laravel Mix: Execute npm run dev to compile your assets. The output will be in the public/js and public/css directories.

Hot Reloading and Cache Busting (Optional):

For enhanced development workflow, enable hot reloading and cache busting:

1. Create mix.php: Create a mix.php file in your project root:

   <code class="language-bash">npm install laravel-mix cross-env node-sass --save-dev</code>

2. Update composer.json: Add "files": ["mix.php"] to the "autoload" section of your composer.json. Run composer dump-autoload.

3. Modify webpack.mix.js: Add .version() and .browserSync() to your webpack.mix.js mix chain:

   <code class="language-javascript">const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');</code>

4. Run npm run hot: This starts a development server with hot reloading.

Production Build:

For deployment, use npm run production to generate optimized, minified assets.

Conclusion:

Laravel Mix offers a user-friendly approach to managing asset compilation in non-Laravel projects, streamlining the development process and reducing the overhead associated with configuring Webpack directly. The optional hot reloading and cache busting features further enhance the developer experience. Remember to add node_modules to your .gitignore file.

The above is the detailed content of How to Use Laravel Mix in Non-Laravel Projects. For more information, please follow other related articles on the PHP Chinese website!