logo标签列表

Webpack - 为什么默认情况下我的bundle.js文件被压缩了？

javascriptreactjswebpackwebpack-dev-serverbuild-tools
11

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

4个回答
14

如果您正在使用webpack 4，其中一种方法是：

在package.json文件中将scripts设置为development或production模式。

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

现在当你运行npm run dev时，它会给你bundle.js但未被压缩。

但当你运行npm run build时，它会给你一个压缩的 bundle。

6

您正在使用没有模式设置的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可以禁用代码压缩和此警告。
3

Webpack 4 默认会进行代码压缩。

尝试将以下内容添加到你的 webpack.config.js 文件中的 module.exports 中。

optimization: {
    minimize: false,
}
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接