admin管理员组

文章数量:1345191

Here is the branch and repo in question: .holdings/tree/dev

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.

How do I ignore this error?

I found this answer here, but it didn't help as I was already implementing the devtools config.

Webpack 4 "size exceeds the remended limit (244 KiB)"

Here is my webpack.config:

/* 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
);

And the package.json 

{
  "name": "moon.holdings",
  "version": "1.0.0",
  "description": "Cryptocurrency asset portfolio",
  "main": "index.js",
  "repository": ".holdings.git",
  "author": "Leon Gaban <[email protected]>",
  "license": "MIT",
  "scripts": {
    "start": "webpack && 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": [
    "<rootDir>/config/polyfills.js",
    "<rootDir>/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-monjs": "^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"
  }
}

Here is the branch and repo in question: https://github./Futuratum/moon.holdings/tree/dev

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.

How do I ignore this error?

I found this answer here, but it didn't help as I was already implementing the devtools config.

Webpack 4 "size exceeds the remended limit (244 KiB)"

Here is my webpack.config:

/* 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
);

And the package.json 

{
  "name": "moon.holdings",
  "version": "1.0.0",
  "description": "Cryptocurrency asset portfolio",
  "main": "index.js",
  "repository": "https://github./Futuratum/moon.holdings.git",
  "author": "Leon Gaban <[email protected]>",
  "license": "MIT",
  "scripts": {
    "start": "webpack && 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": [
    "<rootDir>/config/polyfills.js",
    "<rootDir>/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-monjs": "^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"
  }
}
  • javascript
  • webpack
  • build
Share Improve this question asked Oct 9, 2018 at 14:24 Leon GabanLeon Gaban 39.1k122 gold badges349 silver badges550 bronze badges 1
  • Does this answer your question? Webpack - WARNING in asset size limit: The following asset(s) exceed the remended size limit (244 KiB) – James Skemp Commented Jul 23, 2022 at 23:02
Add a ment  | 

1 Answer 1

Reset to default 8

The webpack 4 feature that's creating the warning is called Performance Hints.

By default, webpack warns If the entry bundle size is larger than 250 KB (244 KiB).

You can customize this limit, as explained in the documentation, by adding this to your webpack config:

performance: {
  maxAssetSize: 1000000
}

This would set the limit to 1 MB.

If you want to turn off webpack's performance hints altogether, you can do it like this (as explained in the documentation):

performance: {
  hints: false
}

本文标签： javascriptWebpack size exceeds the recommended limit (244 KiB)Stack Overflow

版权声明：本文标题：javascript - Webpack: size exceeds the recommended limit (244 KiB) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743796509a2540532.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。