Webpack：大小超出建议限制 (244 KiB)

Question

这是有问题的分支和仓库：https://github.com/Futuratum/moon.holdings/tree/dev

\n\n

您好，我遇到了这个问题，因为我有一个包含大量图像的资产文件夹。我不关心大小，这对于现代网络用户来说应该是正常的。

\n\n

我该如何忽略这个错误？

\n\n

我在这里找到了这个答案，但它没有帮助，因为我已经在实现配置了devtools。

\n\n

Webpack 4“大小超出了建议的限制 (244 KiB)”

\n\n

这是我的 webpack.config：

\n\n

/* eslint-disable no-console */\nimport webpack from \'webpack\';\nimport HtmlWebpackPlugin from \'html-webpack-plugin\';\nimport ExtractTextPlugin from \'extract-text-webpack-plugin\';\nimport CopyWebpackPlugin from \'copy-webpack-plugin\';\nimport path from \'path\';\nimport chalk from \'chalk\';\n\nconst moonholdings = path.resolve(__dirname, \'moonholdings\');\nconst app = path.resolve(__dirname, \'app\');\nconst nodeModules = path.resolve(__dirname, \'node_modules\');\n\nconst HtmlWebpackPluginConfig = new HtmlWebpackPlugin({\n  template: path.join(__dirname, \'/app/index.html\'),\n  inject: \'body\'\n});\n\nconst ExtractTextPluginConfig = new ExtractTextPlugin({\n  filename: \'moonholdings.css\',\n  disable: false,\n  allChunks: true\n});\n\nconst CopyWebpackPluginConfigOptions = [{\n  from: \'app/static\',\n  to: \'static/\'\n}];\n\nconst CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);\n\nconst PATHS = {\n  app,\n  build: moonholdings\n};\n\nconst LAUNCH_COMMAND = process.env.npm_lifecycle_event;\n\nconst isProduction = LAUNCH_COMMAND === \'production\';\nprocess.env.BABEL_ENV = LAUNCH_COMMAND;\n\nconst productionPlugin = new webpack.DefinePlugin({\n  \'process.env\': {\n    NODE_ENV: JSON.stringify(\'production\')\n  }\n});\n\nconst base = {\n  entry: [\'babel-polyfill\', PATHS.app],\n  output: {\n    path: PATHS.build,\n    publicPath: \'/\',\n    filename: \'index_bundle.js\'\n  },\n  resolve: {\n    modules: [app, nodeModules]\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        loader: \'babel-loader\',\n        exclude: /node_modules/\n      },\n      {\n        test: /\\.s?css/,\n        use: [\n          \'style-loader\',\n          \'css-loader\',\n          \'sass-loader\'\n        ]\n      },\n      {\n        test: /\\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,\n        loader: \'file-loader?name=[path][name].[ext]\'\n      }\n    ]\n  }\n};\n\nconst developmentConfig = {\n  devtool: \'inline-source-map\',\n  devServer: {\n    contentBase: moonholdings\n  },\n  plugins: [\n    CopyWebpackPluginConfig,\n    ExtractTextPluginConfig,\n    HtmlWebpackPluginConfig\n  ]\n};\n\nconst productionConfig = {\n  devtool: false,\n  plugins: [\n    CopyWebpackPluginConfig,\n    ExtractTextPluginConfig,\n    HtmlWebpackPluginConfig,\n    productionPlugin\n  ]\n};\n\nconsole.log(`${chalk.magenta(\'\xe0\xb8\xbf\')} ${chalk.green(\'yarn run:\')} ${chalk.red(LAUNCH_COMMAND)}`);\n\nexport default Object.assign(\n  {}, base,\n  isProduction === true ? productionConfig : developmentConfig\n);\n

\n\n

和 package.json

\n\n

{\n  "name": "moon.holdings",\n  "version": "1.0.0",\n  "description": "Cryptocurrency asset portfolio",\n  "main": "index.js",\n  "repository": "https://github.com/Futuratum/moon.holdings.git",\n  "author": "Leon Gaban <leongaban@gmail.com>",\n  "license": "MIT",\n  "scripts": {\n    "start": "webpack && webpack-dev-server",\n    "webpack": "webpack-dev-server",\n    "dev": "webpack-dev-server",\n    "build": "webpack -p",\n    "production": "webpack -p",\n    "test": "yarn run test-eslint; yarn run test-jest:update",\n    "test-eslint": "eslint app",\n    "test-eslint:fix": "eslint --fix app",\n    "test-sasslint": "./node_modules/.bin/sass-lint \'app/**/*.scss\' -v -q",\n    "test-jest": "jest",\n    "test-jest:watch": "jest --watch",\n    "test-jest:coverage": "jest --coverage",\n    "test-jest:update": "jest --updateSnapshot"\n  },\n  "setupFiles": [\n    "<rootDir>/config/polyfills.js",\n    "<rootDir>/src/setupTests.js"\n  ],\n  "now": {\n    "name": "moonholdings",\n    "engines": {\n      "node": "8.11.3"\n    },\n    "alias": "moon.holdings"\n  },\n  "jest": {\n    "moduleNameMapper": {},\n    "moduleFileExtensions": [\n      "js",\n      "jsx"\n    ],\n    "moduleDirectories": [\n      "node_modules",\n      "app"\n    ],\n    "setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"\n  },\n  "dependencies": {\n    "axios": "^0.18.0",\n    "babel-cli": "^6.26.0",\n    "babel-core": "^6.26.0",\n    "babel-eslint": "^8.2.2",\n    "babel-loader": "^7.1.4",\n    "babel-plugin-transform-async-to-generator": "^6.24.1",\n    "babel-plugin-transform-es2015-destructuring": "^6.23.0",\n    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",\n    "babel-plugin-transform-object-rest-spread": "^6.26.0",\n    "babel-plugin-transform-runtime": "^6.23.0",\n    "babel-polyfill": "^6.26.0",\n    "babel-preset-env": "^1.6.1",\n    "babel-preset-es2015": "^6.24.1",\n    "babel-preset-react": "^6.24.1",\n    "babel-preset-react-hmre": "^1.1.1",\n    "babel-preset-stage-0": "^6.24.1",\n    "babel-register": "^6.26.0",\n    "chalk": "^2.3.2",\n    "copy-webpack-plugin": "^4.5.0",\n    "css-loader": "^0.28.10",\n    "enzyme": "^3.3.0",\n    "enzyme-adapter-react-16": "^1.1.1",\n    "enzyme-to-json": "^3.3.1",\n    "eslint": "^4.18.2",\n    "eslint-config-airbnb": "^16.1.0",\n    "eslint-import-resolver-node": "^0.3.2",\n    "eslint-plugin-dependencies": "^2.4.0",\n    "eslint-plugin-import": "^2.9.0",\n    "eslint-plugin-jsx-a11y": "^6.0.3",\n    "eslint-plugin-react": "^7.7.0",\n    "extract-text-webpack-plugin": "^3.0.2",\n    "file-loader": "^1.1.11",\n    "flexboxgrid": "^6.3.1",\n    "git-hooks": "^1.1.10",\n    "history": "^4.7.2",\n    "html-webpack-plugin": "^3.0.6",\n    "jest": "^22.4.2",\n    "lodash": "^4.17.10",\n    "node-sass": "^4.7.2",\n    "path-to-regexp": "^2.2.0",\n    "ramda": "^0.25.0",\n    "react": "^16.2.0",\n    "react-dom": "^16.2.0",\n    "react-hot-loader": "^4.0.0",\n    "react-redux": "^5.0.7",\n    "react-router": "^4.2.0",\n    "react-router-dom": "^4.2.2",\n    "react-router-redux": "^4.0.8",\n    "react-sortable-hoc": "^0.6.8",\n    "react-test-renderer": "^16.3.2",\n    "redux": "^3.7.2",\n    "redux-mock-store": "^1.5.1",\n    "redux-thunk": "^2.2.0",\n    "rest": "^2.0.0",\n    "sass-lint": "^1.12.1",\n    "sass-loader": "^6.0.7",\n    "style-loader": "^0.20.2",\n    "svg-inline-loader": "^0.8.0",\n    "svg-loader": "^0.0.2",\n    "url-loader": "^1.0.1",\n    "webpack": "^3.3.0",\n    "webpack-cli": "^2.0.10",\n    "webpack-dev-server": "2.11.1"\n  }\n}\n

\n

Answer 1

创建警告的 webpack 4 功能称为Performance Hints。

默认情况下，如果条目包大小大于 250 KB (244 KiB)，webpack 会发出警告。

您可以自定义此限制，如文档中所述，将其添加到您的 webpack 配置中：

performance: {
  maxAssetSize: 1000000
}

这会将限制设置为 1 MB。

如果你想完全关闭 webpack 的性能提示，你可以这样做（如文档中所述）：

performance: {
  hints: false
}