title: Webpack: size exceeds the recommended limit (244 KiB)
body: <p>Here is the branch and repo in question: <a href="https://github.com/Futuratum/moon.holdings/tree/dev" rel="noreferrer">https://github.com/Futuratum/moon.holdings/tree/dev</a></p>
  
  <p>Hi I'm running into this problem, because I have an assets folder with a lot of images. I don't care about the size, this should be normal for modern web users.</p>
  
  <p>How do I ignore this error?</p>
  
  <p>I found this answer here, but it didn't help as I was already implementing the <code>devtools</code> config.</p>
  
  <p><a href="https://stackoverflow.com/questions/49348365/webpack-4-size-exceeds-the-recommended-limit-244-kib">Webpack 4 &quot;size exceeds the recommended limit (244 KiB)&quot;</a></p>
  
  <p>Here is my webpack.config:</p>
  
  <pre><code>/* eslint-disable no-console */
  import webpack from 'webpack';
  import HtmlWebpackPlugin from 'html-webpack-plugin';
  import ExtractTextPlugin from 'extract-text-webpack-plugin';
  import CopyWebpackPlugin from 'copy-webpack-plugin';
  import path from 'path';
  import chalk from 'chalk';
  
  const moonholdings = path.resolve(__dirname, 'moonholdings');
  const app = path.resolve(__dirname, 'app');
  const nodeModules = path.resolve(__dirname, 'node_modules');
  
  const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: path.join(__dirname, '/app/index.html'),
    inject: 'body'
  });
  
  const ExtractTextPluginConfig = new ExtractTextPlugin({
    filename: 'moonholdings.css',
    disable: false,
    allChunks: true
  });
  
  const CopyWebpackPluginConfigOptions = [{
    from: 'app/static',
    to: 'static/'
  }];
  
  const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
  
  const PATHS = {
    app,
    build: moonholdings
  };
  
  const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
  
  const isProduction = LAUNCH_COMMAND === 'production';
  process.env.BABEL_ENV = LAUNCH_COMMAND;
  
  const productionPlugin = new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('production')
    }
  });
  
  const base = {
    entry: ['babel-polyfill', PATHS.app],
    output: {
      path: PATHS.build,
      publicPath: '/',
      filename: 'index_bundle.js'
    },
    resolve: {
      modules: [app, nodeModules]
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        },
        {
          test: /\.s?css/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
          loader: 'file-loader?name=[path][name].[ext]'
        }
      ]
    }
  };
  
  const developmentConfig = {
    devtool: 'inline-source-map',
    devServer: {
      contentBase: moonholdings
    },
    plugins: [
      CopyWebpackPluginConfig,
      ExtractTextPluginConfig,
      HtmlWebpackPluginConfig
    ]
  };
  
  const productionConfig = {
    devtool: false,
    plugins: [
      CopyWebpackPluginConfig,
      ExtractTextPluginConfig,
      HtmlWebpackPluginConfig,
      productionPlugin
    ]
  };
  
  console.log(`${chalk.magenta('฿')} ${chalk.green('yarn run:')} ${chalk.red(LAUNCH_COMMAND)}`);
  
  export default Object.assign(
    {}, base,
    isProduction === true ? productionConfig : developmentConfig
  );
  </code></pre>
  
  <p>And the package.json </p>
  
  <pre><code>{
    "name": "moon.holdings",
    "version": "1.0.0",
    "description": "Cryptocurrency asset portfolio",
    "main": "index.js",
    "repository": "https://github.com/Futuratum/moon.holdings.git",
    "author": "Leon Gaban &lt;leongaban@gmail.com&gt;",
    "license": "MIT",
    "scripts": {
      "start": "webpack &amp;&amp; webpack-dev-server",
      "webpack": "webpack-dev-server",
      "dev": "webpack-dev-server",
      "build": "webpack -p",
      "production": "webpack -p",
      "test": "yarn run test-eslint; yarn run test-jest:update",
      "test-eslint": "eslint app",
      "test-eslint:fix": "eslint --fix app",
      "test-sasslint": "./node_modules/.bin/sass-lint 'app/**/*.scss' -v -q",
      "test-jest": "jest",
      "test-jest:watch": "jest --watch",
      "test-jest:coverage": "jest --coverage",
      "test-jest:update": "jest --updateSnapshot"
    },
    "setupFiles": [
      "&lt;rootDir&gt;/config/polyfills.js",
      "&lt;rootDir&gt;/src/setupTests.js"
    ],
    "now": {
      "name": "moonholdings",
      "engines": {
        "node": "8.11.3"
      },
      "alias": "moon.holdings"
    },
    "jest": {
      "moduleNameMapper": {},
      "moduleFileExtensions": [
        "js",
        "jsx"
      ],
      "moduleDirectories": [
        "node_modules",
        "app"
      ],
      "setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"
    },
    "dependencies": {
      "axios": "^0.18.0",
      "babel-cli": "^6.26.0",
      "babel-core": "^6.26.0",
      "babel-eslint": "^8.2.2",
      "babel-loader": "^7.1.4",
      "babel-plugin-transform-async-to-generator": "^6.24.1",
      "babel-plugin-transform-es2015-destructuring": "^6.23.0",
      "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-plugin-transform-runtime": "^6.23.0",
      "babel-polyfill": "^6.26.0",
      "babel-preset-env": "^1.6.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "babel-preset-react-hmre": "^1.1.1",
      "babel-preset-stage-0": "^6.24.1",
      "babel-register": "^6.26.0",
      "chalk": "^2.3.2",
      "copy-webpack-plugin": "^4.5.0",
      "css-loader": "^0.28.10",
      "enzyme": "^3.3.0",
      "enzyme-adapter-react-16": "^1.1.1",
      "enzyme-to-json": "^3.3.1",
      "eslint": "^4.18.2",
      "eslint-config-airbnb": "^16.1.0",
      "eslint-import-resolver-node": "^0.3.2",
      "eslint-plugin-dependencies": "^2.4.0",
      "eslint-plugin-import": "^2.9.0",
      "eslint-plugin-jsx-a11y": "^6.0.3",
      "eslint-plugin-react": "^7.7.0",
      "extract-text-webpack-plugin": "^3.0.2",
      "file-loader": "^1.1.11",
      "flexboxgrid": "^6.3.1",
      "git-hooks": "^1.1.10",
      "history": "^4.7.2",
      "html-webpack-plugin": "^3.0.6",
      "jest": "^22.4.2",
      "lodash": "^4.17.10",
      "node-sass": "^4.7.2",
      "path-to-regexp": "^2.2.0",
      "ramda": "^0.25.0",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "react-hot-loader": "^4.0.0",
      "react-redux": "^5.0.7",
      "react-router": "^4.2.0",
      "react-router-dom": "^4.2.2",
      "react-router-redux": "^4.0.8",
      "react-sortable-hoc": "^0.6.8",
      "react-test-renderer": "^16.3.2",
      "redux": "^3.7.2",
      "redux-mock-store": "^1.5.1",
      "redux-thunk": "^2.2.0",
      "rest": "^2.0.0",
      "sass-lint": "^1.12.1",
      "sass-loader": "^6.0.7",
      "style-loader": "^0.20.2",
      "svg-inline-loader": "^0.8.0",
      "svg-loader": "^0.0.2",
      "url-loader": "^1.0.1",
      "webpack": "^3.3.0",
      "webpack-cli": "^2.0.10",
      "webpack-dev-server": "2.11.1"
    }
  }
  </code></pre>