web-dev-qa-db-ja.com

Webpack-デフォルトでbundle.jsファイルが縮小されるのはなぜですか？

私は反応を学び、私がフォローしているオンラインコースは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"
  }
}
javascriptreactjswebpackwebpack-dev-serverbuild-tools
9
PowPowPow

モード設定なしで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 confで縮小化とこの警告を無効にします。

4
Axnyff

あなたがwebpack 4を使用しているので

方法の1つは次のとおりです。

内部 package.jsonscriptsをdevelopmentまたはproductionモードに設定します

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

そして、npm run devを実行すると、bundle.jsが得られますが、縮小されません。

しかし、npm run buildを実行すると、縮小されたバンドルが表示されます

8
Aaqib

Webpack 4はデフォルトで最小化します。

これをmodule.exportsのwebpack.config.jsに追加してみてください。

optimization: {
    minimize: false,
}
1
floralGhost