0

Помогите пожалуйста уже неделю как не могу правильно собрать файлы показывает warning

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  office.jpg (268 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  main (456 kB)
      bundle.js
      style.css


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Покажу ошибку на примере моего webpack.config.js

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const NODE_ENV = process.env.NODE_ENV || "development";
const webpack = require("webpack");
const tinypngCompress = require("webpack-tinypng-compress");

const config = {
    entry: "./common.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename:"bundle.js",
        publicPath:"dist/"
    },
    // performance: {
    //  maxEntrypointSize:400000
    // },
    module: {
        rules: [
            {
                use:"babel-loader",
                test: /\.js$/,
            },
            {
                loader:ExtractTextPlugin.extract({
                    loader:"css-loader",
                    options: {minimize:true}
                }),
                test: /\.css$/,
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader:"url-loader"
                        // options:{ limit:1000, name:"[name].[ext]" } 
                    },
                    "image-webpack-loader"
                ]
            }
        ]
    }, 
    plugins: [
        new ExtractTextPlugin("style.css"),
    ]
};
if (NODE_ENV == "production") {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                drop_console:true,
                unsafe:true
            }
        })
    );
}
module.exports = config;

Как видите там есть закоментированный options(внизу loader-а) в таком порядке webpack выдает ошибку

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  style.css (448 kB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (250 kB). This can impact web performance.
Entrypoints:
  main (456 kB)
      bundle.js
      style.css


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Если раскомментировать строку options то получу ошибку что картинка слишком много весит вот оригинал ошибки

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (250 kB).
This can impact web performance.
Assets:
  office.jpg (291 kB)

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
2
  • Проблема связана с тем что loader:"url-loader" преобразовывет картинки в DataURI и пихает их в CSS и JS файлы. Попробуйте заменить модуль loader:"url-loader" на loader: 'file-loader'(github.com/webpack-contrib/file-loader) должно помочь. 1 мар 2018 в 9:49
  • @ДмитрийМирошниченко нет не помогло к сожалению :(
    – Randall
    1 мар 2018 в 14:23

1 ответ 1

0

Решил мою проблему данный код

npm i webpack webpack-cli --save-dev

Скачивание и установка webpack 4 Legato

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.