Webpack - Why is my bundle.js file minified by default?

Question

I am learning react, and the online course I am following uses webpack. I didn't add any minifying or uglyfying options to my webpack.config but still my bundle.js is minified. I am not sure why or how to turn it off. I have attached my webpack.config.js and package.json. Thanks for your help.

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    }, {
      test: /\.s?css$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    }]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true
  }
};

{
  "name": "expensify",
  "version": "1.0.0",
  "description": "learn react",
  "main": "index.js",
  "author": "powpowpow",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "live-server": "^1.2.0",
    "node-sass": "^4.8.3",
    "normalize.css": "^8.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-modal": "^3.3.2",
    "react-router-dom": "^4.2.2",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.2.0",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

score 14 · Answer 1 · answered Mar 31 '18 at 20:49

As you are using webpack 4

One of the ways is :

Inside package.json set scripts to either development or production mode

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

And now when you run npm run dev it will give you bundle.js but not minified.

But when you run npm run build it will give you a minified bundle

score 6 · Accepted Answer · answered Mar 31 '18 at 20:49

You are using webpack 4 without a mode setting. Normally, you should have the following warning:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn 
more: https://webpack.js.org/concepts/mode/

Add mode: development in your conf to disable minification and this warning.

score 3 · Answer 3 · answered Aug 21 '19 at 16:30

3

Webpack 4 minimizes by default.

Try adding this to your module.exports in webpack.config.js.

optimization: {
    minimize: false,
}

answered Aug 21 '19 at 16:30

floralGhost

49
3

score 0 · Answer 4 · answered Jan 13 '22 at 11:33

0

Because you didn't specify the mode in your config file, by default webpack set mode: production.
In production mode, the webpack minify the bundle by default. Read more : https://webpack.js.org/guides/production/#minification

answered Jan 13 '22 at 11:33

Boulanfad Mustapha

153
1
9

Webpack - Why is my bundle.js file minified by default?

4 Answers4