How do I debug webpack?

Question

I'm having trouble building a project. I have an html template that gets processed by html-webpack-template. Sometimes it works and I get the output file. Other times it fails and I get nothing. I can't go to production because every time I npm run prod I have no way of knowing if my build will fail or succeed. I need to debug webpack, and everyone on the internet claims it's easy. But I'm lost.

npm run dev is aliased as npm run cross-env NODE_ENV=development gulp . So I suppose that's a gulp script. But I'm not sure where to look for this script. I've never used gulp. I think I'm supposed to be looking for the entry point for webpack, but I'm not sure.

I tried installing node-nightly and inspecting the webpack.js file. But to be honest, I have no clue what I'm doing or looking at. I just followed the multiple tutorials online.

I just need to figure out why the build randomly succeeds or fails.

Answer 1

Those commands you are running are inside of a package.json script in your root directory. They were custom made by the person who built the package originally, worth looking at each command and what it does actually (the line that follows) for example here is mine for webpack. Notice the scripts area

{
  "name": "project_phase_2",
  "version": "1.0.0",
  "description": "Udacity project phase 2",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/levyadams/restaurantReviewApp.git"
  },
  "author": " <letitslide87@gmail.com>",
  "license": "MIT",
  "scripts": {
    "gulp": "gulp",
    "build-files": "webpack --config webpack.config.js",
    "dev-server": "webpack-dashboard -- webpack-dev-server build/bundle.js --open",
    "watch": "webpack --watch",
    "build": "npm run build-files && npm run watch && npm run dev-server",
    "start": "npm run watch && npm run dev-server"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",

..etc etc. the file 'gulp' command refers to gulpfile.js, which will also be located in your root. For example, here is a portion of one of my gulpfile.js's

var gulp = require('gulp');
//webp images for optimization on some browsers
const webp = require('gulp-webp');
//responsive images!
var responsive = require('gulp-responsive-images');
//gulp delete for cleaning
var del = require('del');
//run sequence to make sure each gulp command completes in the right order.
var runSequence = require('run-sequence');
// =======================================================================// 
// !                Default and bulk tasks                                //        
// =======================================================================//  
//default runs when the user types 'gulp' into CLI
gulp.task('default',function(callback){
    runSequence('clean','webp',['responsive-jpg','responsive-webp','copy-data','copy-sw']),callback
});
// =======================================================================// 
//                  Images and fonts                                      //        
// =======================================================================//  
gulp.task('responsive-jpg',function(){
    gulp.src('src/images/*')
    .pipe(responsive({
        '*.jpg':[
        {width:1600, suffix: '_large_1x', quality:40},
        {width:800, suffix: '_medium_1x', quality:70},
        {width:550, suffix: '_small_1x', quality:100}
    ]
    }))
    .pipe(gulp.dest('build/images'));
});
gulp.task('responsive-webp',function(){
    gulp.src('src/images/*')
    .pipe(responsive({
        '*.webp':[
        {width:1600, suffix: '_large_1x', quality:40},
        {width:800, suffix: '_medium_1x', quality:70},
        {width:550, suffix: '_small_1x', quality:80}
    ]
    }))
    .pipe(gulp.dest('build/images'));
});

I would suggest starting with gulp from the beginning, get it working 100% before moving on to webpack development.