Webpack

Question

我正在学习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"
  }
}

Answer 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 以禁用缩小和此警告。

Answer 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 它会给你一个 minified bundle

Answer 3

Webpack 4 默认最小化。

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

optimization: {
    minimize: false,
}

Answer 4

因为你没有在配置文件中指定 mode，默认情况下 webpack 设置 mode: production。
在生产模式下，webpack 默认压缩包。阅读更多：https://webpack.js.org/guides/production/#minification

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

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

javascript

build-tools

reactjs

webpack-dev-server