मैं प्रतिक्रिया सीख रहा हूं, और मैं जिस ऑनलाइन पाठ्यक्रम का अनुसरण कर रहा हूं वह वेबपैक का उपयोग करता है। मैंने अपने webpack.config में कोई छोटा या बदसूरत विकल्प नहीं जोड़ा है लेकिन फिर भी मेरा बंडल.जेएस छोटा है। मुझे यकीन नहीं है कि इसे क्यों या कैसे बंद किया जाए। मैंने अपना 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"
  }
}
9
PowPowPow 31 मार्च 2018, 23:43

3 जवाब

सबसे बढ़िया उत्तर

आप बिना मोड सेटिंग के वेबपैक 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 जोड़ें।

5
Axnyff 31 मार्च 2018, 20:49

वेबपैक 4 डिफ़ॉल्ट रूप से छोटा होता है।

इसे अपने module.exports में webpack.config.js में जोड़ने का प्रयास करें।

optimization: {
    minimize: false,
}
2
floralGhost 21 अगस्त 2019, 16:30

जैसा कि आप वेबपैक का उपयोग कर रहे हैं 4

तरीकों में से एक है:

package.json के अंदर scripts को या तो development या production मोड

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

और अब जब आप npm run dev चलाते हैं तो यह आपको bundle.js देगा लेकिन छोटा नहीं

लेकिन जब आप npm run build चलाते हैं तो यह आपको एक छोटा बंडल . देगा

12
Aaqib 31 मार्च 2018, 20:49