Webpack 2.X在生产捆绑期间不缩小React应用程序

Question

我对这个问题有类似的问题，似乎没有得到解决。

我已经完成了我的React应用程序的V1，并运行了webpack -p将其捆绑生产。 捆绑包的开发版本大约为2MB，prod版本大小相同。 React dev工具扩展确认我仍然处于开发模式，并且反应，图表和时刻的webpack-bundle-analyzer图表都大于400kb。

控制台输出没有我能看到的错误。

任何人遇到这个问题或知道我做错了什么？

webpack.config.js

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractSass = new ExtractTextPlugin({
  filename: 'bundle.css'
});

module.exports = {
  context: __dirname,
  entry: './client/src/js/App.jsx',
  devtool: 'eval',
  output: {
    path: path.join(__dirname, '/client/dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.scss', 'css']
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        include: path.join(__dirname, '/client/src/js'),
        enforce: 'pre'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '/client/src/js')
      },
      {
        test: /\.jsx$/,
        loader: 'babel-loader',
        include: path.join(__dirname, '/client/src/js')
      },
      {
        test: /\.scss$/,
        loader: extractSass.extract({
            loader: [
              {
                loader: 'css-loader'
              },
              {
                loader: 'sass-loader'
              }
            ]
        })
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    extractSass,
    new BundleAnalyzerPlugin()
  ]
};

webpack -p控制台输出

Hash: 8bdf532dc582e2609c1a
Version: webpack 2.6.1
Time: 4904ms
     Asset     Size  Chunks                    Chunk Names
 bundle.js  2.07 MB       0  [emitted]  [big]  main
bundle.css  8.22 kB       0  [emitted]         main
   [4] ./~/react/react.js 56 bytes {0} [built]
  [18] ./~/react-router-dom/es/index.js 925 bytes {0} [built]
  [69] ./~/react-dom/index.js 59 bytes {0} [built]
 [230] ./client/src/js/Footer.jsx 324 bytes {0} [built]
 [231] ./client/src/js/Home.jsx 431 bytes {0} [built]
 [232] ./client/src/js/Hub.jsx 11.4 kB {0} [built]
 [233] ./client/src/js/Hubs.jsx 806 bytes {0} [built]
 [234] ./client/src/js/Nav.jsx 1.06 kB {0} [built]
 [235] ./client/src/js/News.jsx 3.54 kB {0} [built]
 [236] ./client/src/js/Overview.jsx 13.8 kB {0} [built]
 [237] ./client/src/js/Privacy.jsx 263 bytes {0} [built]
 [238] ./client/src/js/Ranks.jsx 6.65 kB {0} [built]
 [239] ./client/src/js/TermsConditions.jsx 305 bytes {0} [built]
 [240] ./client/src/scss/bundle.scss 41 bytes {0} [built]
 [258] ./client/src/js/App.jsx 3.6 kB {0} [built]
    + 422 hidden modules
Child extract-text-webpack-plugin:
       [0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
       [1] ./~/css-loader!./~/sass-loader/lib/loader.js!./client/src/scss/bundle.scss 8.72 kB {0} [built]

的package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "main": "server.js",
  "private": true,
  "engines": {
    "node": "6.9.5"
  },
  "scripts": {
    "prod": "webpack -p",
    "dev": "webpack --watch",
    "serve": "nodemon server.js"
  },
  "author": "",
  "dependencies": {
    "async": "^2.4.1",
    "axios": "^0.16.1",
    "body-parser": "^1.15.2",
    "dotenv": "^4.0.0",
    "express": "^4.14.0",
    "mongoose": "^4.8.0",
    "nodemon": "^1.11.0",
    "path": "^0.12.7"
  },
  "devDependencies": {
    "babel-core": "6.16.0",
    "babel-loader": "6.2.7",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "6.18.0",
    "babel-preset-es2017": "6.16.0",
    "babel-preset-react": "6.16.0",
    "babel-register": "6.16.0",
    "chart.js": "^2.6.0",
    "css-loader": "0.25.0",
    "eslint": "^3.15.0",
    "eslint-loader": "1.7.0",
    "eslint-plugin-promise": "2.0.1",
    "eslint-plugin-react": "6.3.0",
    "extract-text-webpack-plugin": "2.1.0",
    "jsdom": "9.5.0",
    "json-loader": "0.5.4",
    "lodash": "4.16.2",
    "node-sass": "^4.5.0",
    "react": "15.5.4",
    "react-chartjs-2": "^2.1.0",
    "react-dom": "15.5.4",
    "react-router-dom": "^4.1.1",
    "sass-loader": "^5.0.1",
    "style-loader": "0.13.1",
    "webpack": "2.6.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "yarn": "^0.24.6"
  }
}

示例组件头

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import axios from 'axios';

import Utilities from './Utilities.jsx';
import Header from './Header';
import ChartLine from './ChartLine';
import ChartDoughnut from './ChartDoughnut';

Answer 1

您的问题是devtool: 'eval' Webpack配置中的devtool: 'eval'行。 Webpack不会自动禁用生产构建的源映射; 你可以检查process.env.NODE_ENV以查看它是否在生产中并禁用源映射。 源地图非常大（但对于开发非常有用。）

你想把线devtool: process.env.NODE_ENV === 'production' ? false : 'eval'像devtool: process.env.NODE_ENV === 'production' ? false : 'eval' devtool: process.env.NODE_ENV === 'production' ? false : 'eval'并在进行生产构建时将源映射设置为false。 这应该会减少最终版本的1.5MB +。