Laravel 5.4: migrate from gulp to webpack

gup-to-webpack.md

• Create a webpack.mix.js file in root directory:

const { mix } = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');
  
/* Optional: uncomment for bootstrap fonts */
// mix.copy('node_modules/bootstrap-sass/assets/fonts/bootstrap/','public/fonts/bootstrap');

• Delete gulpfile.js

• Replace package.json content with (don't forget to keep your own dependencies):

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}

• Remove require('vue-resource'); if present in assets/js/bootstrap.js

• Replace:

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

By:

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

• Run yarn (or npm install)

• Run npm run watchto start working.

Thanks a lot, I appreciate. Been thrown off by the fact that gulp watch kept returning errors. Sorry, I noticed my code updates are not been watched. Each time I need to refresh, I'll run npm run watch to see the update. Why is that?

Hiyas and to concatenate more js files in app.js ?

If you get the following error when running npm run dev:

> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "public" is not an absolute path!

make sure to update the laravel-mix dependency to:

"laravel-mix": "^0.10.0",

In the above package.json content, please replace node_modules/cross-env/bin/cross-env.js to node_modules/cross-env/dist/bin/cross-env.js

Nice write-up! FYI gup-to-webpack.md => gulp-to-webpack.md ?

Thanks!

merci bro

very important to upgrade laravel mix and take note of @mkjangir also

I had problems with: npm run watch command. So copy/paste a package.json code from another laravel project (6.0) and works it! (The scripts part was the conflict)

{
  "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": "npm run development -- --watch",
    "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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "gulp": "^3.9.1",
    "jquery": "^3.1.0",
    "laravel-echo": "^1.10.0",
    "laravel-elixir": "^6.0.0-14",
    "laravel-elixir-vue-2": "^0.2.0",
    "laravel-elixir-webpack-official": "^1.0.2",
    "laravel-mix": "^0.10.0",
    "lodash": "^4.16.2",
    "pusher-js": "^7.0.2",
    "socket.io-client": "^3.0.4",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3"
  }
}