There is no webpack.mix.js in my node_modules

Question

After installing laravel mix via terminal and running the command cp node_modules/laravel-mix/setup/webpack.mix.js ./ I'm getting this error.

cp : Cannot find path 'C:\Users\COBNETCKNN\Local Sites\portofolio\app\p
ublic\wp-content\themes\wp-portofolio\node_modules\laravel-mix\setup\we 
At line:1 char:1
+ cp node_modules/laravel-mix/setup/webpack.mix.js ./
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (C:\Users\COBNET...\webp  
   ack.mix.js:String) [Copy-Item], ItemNotFoundException
    + FullyQualifiedErrorId : PathNotFound,Microsoft.PowerShell.Comman  
   ds.CopyItemCommand

I also looked inside node_modules/laravel-mix/setup/ and there was no webpack.mix.js so I couldn't pull it from there, did the directory changed or what happened? Can I copy webpack.mix.js from my previous projects and modify it for my needs?

Answer 1

For non-Laravel standalone projects, you should do the following.

mkdir my-app && cd my-app
npm init -y
npm install laravel-mix --save-dev

Create a Mix config file within the root of your project.

touch webpack.mix.js

Open webpack.mix.js and add the following code:

// webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist').setPublicPath('dist');

Compile with npx mix or npm run dev.

Your webpack.mix.js should not be in /node-modules, it needs to be in the root of your project instance.

Your package.json should look more like the following with the latest version of Laravel Mix.

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.15.2",
        "autoprefixer": "^10.2.4",
        "browser-sync": "^2.26.14",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.11",
        "postcss": "^8.2.4",
        "sass": "^1.32.6",
        "sass-loader": "^10.1.1",
        "tailwindcss": "^2.0.2",
        "vue-template-compiler": "^2.6.12"
    }
}