CODEWITHSUNDEEP
reactjswebpackminify
Steverino
Steverino

Reputation: 2266

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

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?

Upvotes: 27

Views: 25699

Answers (4)

Muhammed
Muhammed

Reputation: 164

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

Upvotes: 12

Vincent Decaux
Vincent Decaux

Reputation: 10714

Why don't simply use:

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

Upvotes: 20

Predrag Davidovic
Predrag Davidovic

Reputation: 1566

You should add to your webpack.build.js file

devtool: 'inline-source-map',

Upvotes: 0

Sean Larkin
Sean Larkin

Reputation: 6420

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

Upvotes: 4

Related Questions