Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Laravel 5.4: migrate from gulp to webpack
  • 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.

@webpriest

This comment has been minimized.

Copy link

commented Feb 2, 2017

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?

@obelich

This comment has been minimized.

Copy link

commented Feb 8, 2017

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

@brandonsimpson

This comment has been minimized.

Copy link

commented Apr 18, 2017

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",
@mkjangir

This comment has been minimized.

Copy link

commented May 18, 2017

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

@michaelsanford

This comment has been minimized.

Copy link

commented Jul 10, 2017

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

@thinckx

This comment has been minimized.

Copy link

commented Nov 3, 2017

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.