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

【问题标题】：Webpack - Why is my bundle.js file minified by default?Webpack - 为什么我的 bundle.js 文件默认会缩小？
【发布时间】：2018-09-10 13:05:45
【问题描述】：

我正在学习 react，我正在关注的在线课程使用 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"
  }
}

【问题讨论】：

标签： javascript reactjs webpack webpack-dev-server build-tools

【解决方案1】：

您正在使用没有模式设置的 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/

在您的 conf 中添加 mode: development 以禁用缩小和此警告。

【讨论】：

【解决方案2】：

当你使用 webpack 4 时

其中一种方法是：

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

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

现在，当您运行 npm run dev 时，它会为您提供 bundle.js 但不会缩小。

但是当你运行 npm run build 时，它会给你一个缩小的包

【讨论】：

【解决方案3】：

Webpack 4 默认最小化。

尝试将此添加到您的module.exports 中的webpack.config.js。

optimization: {
    minimize: false,
}

【讨论】：