Webpack：大小超出建议的限制（244 KiB）

Question

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

嗨，我遇到了这个问题，因为我有一个包含很多图像的素材资源文件夹。我不在乎大小，这对于现代网络用户来说应该是正常的。

如何忽略此错误？

我在这里找到了这个答案，但是由于我已经实现了devtools配置，所以没有帮助。

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

这是我的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
);

还有package.json

{
  "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 <leongaban@gmail.com>",
  "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-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"
  }
}

Answer 1

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

默认情况下，如果条目捆绑包的大小大于250 KB（244 KiB），则webpack会发出警告。

您可以通过将其添加到Webpack配置中来自定义此限制as explained in the documentation：

<jaxws:bindings
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"
wsdlLocation="EC2_2009-07-15.wsdl"
xmlns="http://java.sun.com/xml/ns/jaxws"
xmlns:jxb="http://java.sun.com/xml/ns/jaxb"
xmlns:jaxws="http://java.sun.com/xml/ns/jaxws">

<jaxws:enableWrapperStyle>false</jaxws:enableWrapperStyle>
<jaxws:bindings node="wsdl:definitions/wsdl:types/xs:schema[@targetNamespace='http://ec2.amazonaws.com/doc/2009-07-15/']">
 <jxb:bindings node="xs:complexType[@name='tns:DescribeSnapshotsType']//xs:element[@name='snapshotSet']">
     <jxb:property name="snapshotRequestSet"/>
 </jxb:bindings>
 <jxb:bindings node="xs:complexType[@name='DescribeSnapshotsResponseType']//xs:element[@name='snapshotSet']">
     <jxb:property name="snapshotResponseSet"/>
 </jxb:bindings>     
</jaxws:bindings>

这会将限制设置为1 MB。

如果您想完全打开webpack的性能提示，可以这样做（as explained in the documentation）：

performance: {
  maxAssetSize: 1000000
}