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

Question

我正在学习反应，我遵循的在线课程使用webpack。我没有在webpack.config中添加任何缩小或丑陋的选项，但我的bundle.js仍然缩小了。我不确定为什么或如何将其关闭。我已经附上了我的webpack.config.js和package.json。谢谢你的帮助。

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

当您使用webpack 4时

方式之一是：

在package.json内部设置scripts为development或production模式

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

现在，当您运行时，npm run dev它会给您带来好处，bundle.js但不会使您感到沮丧。

但是，当您运行npm run build它时，它会给您缩小的包装

Answer 2

您正在使用没有模式设置的webpack 4。通常，您应该具有以下警告：

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/

添加mode: development您的配置文件以禁用缩小和此警告。