Webpack - 为什么我的 bundle.js 文件默认会缩小？

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" } }

Answer 1

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

Answer 2

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.

Answer 3

Webpack 4 minimizes by default.

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

optimization: {
    minimize: false,
}

Answer 4

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