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?

You probably want sourcemaps, see stackoverflow.com/questions/30870830/… — ivarni
– ivarni, Commented Dec 21, 2016 at 6:28

Vincent Decaux · Accepted Answer · 2021-12-30 20:36:40Z

22

Why don't simply use:

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

answered Dec 30, 2021 at 20:36

Vincent Decaux

10.9k7 gold badges67 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BairDev Over a year ago

This alone did not work for letting Webpack choose the non-minified files of the dependencies (e.g. React). I did need to add mode: 'development', devtool: 'source-map', too.

tony · Accepted Answer · 2023-04-12 01:45:14Z

12

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',
  // ...
};

edited Apr 12, 2023 at 1:45

tony

1,0289 silver badges22 bronze badges

answered Sep 24, 2021 at 23:42

Muhammed

1643 silver badges9 bronze badges

3 Comments

Chris Hayes Over a year ago

Thanks! One thing to note: with Webpack 5 devtool has different values. For example, I had to use devtool: 'source-map',

John Smith Optional Dec 15, 2024 at 12:32

In what file and at what location in that file should I put this?

Muhammed Jan 15 at 16:07

It is commonly named as webpack.config.js. But sometimes you can see like webpack.dev.config.js, webpack.dev.js, webpack.prod.config.js or webpack.prod.js etc.

Sean Larkin · Accepted Answer · 2016-12-21 05:26:05Z

4

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).

answered Dec 21, 2016 at 5:26

Sean Larkin

6,4401 gold badge31 silver badges43 bronze badges

Comments

Predrag Davidovic · Accepted Answer · 2021-04-05 06:35:02Z

0

You should add to your webpack.build.js file

devtool: 'inline-source-map',

answered Apr 5, 2021 at 6:35

Predrag Davidovic

1,5762 gold badges18 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related