web-dev-qa-db-fra.com

Webpack - Pourquoi mon fichier bundle.js est-il minifié par défaut?

J'apprends à réagir et le cours en ligne que je suis utilise webpack. Je n'ai ajouté aucune option de minification ou de laideur à mon webpack.config mais mon bundle.js est toujours minifié. Je ne sais pas pourquoi ni comment le désactiver. J'ai joint mon webpack.config.js et package.json. Merci de votre aide.

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

Vous utilisez webpack 4 sans paramètre de mode. Normalement, vous devriez avoir l'avertissement suivant:

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/

Ajouter mode: development dans votre conf pour désactiver la minification et cet avertissement.

4
Axnyff

Lorsque vous utilisez Webpack 4

L'une des façons est:

Inside package.json définissez scripts en mode development ou production

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

Et maintenant, lorsque vous exécutez npm run dev cela vous donnera bundle.js mais non minifié .

Mais lorsque vous exécutez npm run build il vous donnera un paquet minifié

8
Aaqib

Webpack 4 minimise par défaut.

Essayez d'ajouter ceci à votre module.exports dans webpack.config.js.

optimization: {
    minimize: false,
}
1
floralGhost