combining js files in app.js in laravel 5

Question

hi there I want create an app.js on laravel 5.4

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js');

and in package.josn

{
  "private": true,
  "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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "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 --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "laravel-echo": "^1.3.2",
    "pusher-js": "^4.1.0",
    "sweetalert": "^1.1.3",
    "webpack": "^3.5.5"
  }
}

I only needs this (to save in app.js)

    "laravel-echo": "^1.3.2",
    "pusher-js": "^4.1.0",
    "sweetalert": "^1.1.3",

how can I do it?

I try NMP run dev but it combine all js.

also what is 'webpack'? do I need it?

Answer 1

First make sure you have latest nodejs installed and then run npm install after installation is done.

On your webpack.mix.js add another line with your file that you want to create:

mix.js('resources/assets/js/yourfile.js', 'public/js');

place the code in that .js file then open terminal and run npm run dev this will compile the file to project public directory public/assets/js/yourfile.js after this run npm run watch this way any change that you make on your js file will be compiled automatically so you don't have to call npm run dev each time that you make a change.

webpack

Is a pre-configured webpack.config.js file to get you up and running as quickly as possible. Occasionally, you may need to manually modify this file(in our case we are referencing another js on webpack ). You might have a special loader or plug-in that needs to be referenced