Can I get Webpack to bundle but without minification for debugging?

Question

Seems like a truly stupid question that must have an answer somewhere, but I've searched for hours to no avail. I'm new to ReactJS and building with Webpack, build configs in general. I'm using Webpack to link and bundle my entire project, including ReactJS. It works great, but I cannot figure out any way to get the bundle to come out un-minified so that I can debug issues when they arise.

Here is my Webpack config:

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'public/js');
var APP_DIR = path.resolve(__dirname, 'build-source/js');

var config = {
  entry: APP_DIR + '\\main.js',
  output: {
    path: BUILD_DIR,
    filename: 'build.js'  // want this output file to end un-minified
  },
  module: {
    loaders: [
      {
        test: /\.jsx?/,
        include: APP_DIR,
        loader: 'babel'
      }
    ]
  }
};

module.exports = config;

I run the bundling execution with either npm run dev or npm run build which call upon the following from my package.json:

{
  /* blah blah */,
  "scripts": {
    "start": "node ./bin/www",
    "dev": "webpack -d --watch",
    "build": "webpack -p"
  },
  "dependencies": {
    "babel-core": "^6.16.0",
    "babel-loader": "^6.2.5",
    "babel-preset-react": "^6.16.0",
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.13.4",
    "helmet": "^3.1.0",
    "morgan": "~1.7.0",
    "mysql": "^2.11.1",
    "querystring": "^0.2.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "request": "^2.75.0",
    "serve-favicon": "~2.3.0",
    "webpack": "^1.13.2"
  }
}

What do I need to change to get un-minified JavaScript bundles out of my Webpack execution?

Answer 1

When you use the -p flag for webpack's cli, you are telling webpack to use the UglifyJSPlugin (behind the scenes)

So instead, I would have a separate build task that runs webpack without the -p flag and instead passes the following in your config instead.

var webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      options: {
        compress: {drop_debugger: false}
      }
    })
  ]
};

Additionally, you can see that I've passed a custom option to the UglifyJsPlugin (which just corresponds to UglifyJs's compression options).

Answer 2

It is a late answer but maybe helps someone else.

When you set mode: 'development' you will get a non minified bundle. Webpack is using terser plugin by default for javascript minification in production mode even if you don't use it explicitly.

Also for debugging devtool option is a must.

As an example :

const config = {
  // ...
  mode: 'development',
  devtool: 'source-map',
  // ...
};

Answer 3

You should add to your webpack.build.js file

devtool: 'inline-source-map',

Answer 4

Why don't simply use:

module: {
   // ....
},
optimization: {
   minimize: false
},