Как сделать веб-пакет менее подробным?

Ответ 1

Вы можете добавить --quiet и --no-info в командную строку webpack-dev-server: http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

Если вы используете webpack в режиме просмотра, вы можете поместить | awk '{if ($0 !~ /^ *\[[0-9]*\]/) {print} else {if ($0 ~ /\[built\]/) {print}}}' после него, который будет печатать весь вывод, кроме файлов, которые не были перестроены.

Ответ 2

Вы можете использовать опцию Weba CLI --display, чтобы установить подробность вывода статистики. Вот доступные значения.

Э.Г.

--display=minimal

Ответ 3

Из документов веб-пакета:

Опция статистики позволяет точно контролировать, какая информация о пакете будет отображаться. Это может быть хорошим промежуточным положением, если вы не хотите использовать quiet или noInfo, потому что вам нужна некоторая информация о пакете, но не вся.

Для webpack-dev-server это свойство должно быть в объекте devServer.

//example with module.exports in webpack.config.js
module.exports = {
  //...
  stats: 'minimal'
};

//example with dev-sever in webpack.config.js
dev-sever: {
  //...
  stats: 'minimal'
}

Другие документы, включая errors-only, none, verbose и другие, см. в документации.

ссылка: https://webpack.js.org/configuration/stats/

Ответ 4

Я немного изменил инструкцию Haken grep, чтобы он работал на начальной загрузке и когда я обновлял файлы JS.

Вот фрагмент кода в моем package.json.

scripts": {
    "dev": "npm run dev | grep -v \"\\[\\d*\\]\""
}

Это будет отфильтровывать все строки, содержащие шаблоны, такие как [231], [232] и т.д.

Ответ 5

Используйте параметры статистики веб-пакета.

Например, чтобы удалить сотни строк, генерируемых кусками:

stats: {
    chunks: false
}

Чтобы удалить информацию о модулях:

stats: {
    chunkModules: false
}

См. документацию по файлам для многих других опций.

Ответ 6

Если вы используете версию express, вы можете включить опцию noInfo:

import webpackMiddleware from 'webpack-dev-middleware';

app.use(webpackMiddleware(compiler, {
  noInfo: true
}));

Ответ 7

Если вы используете karma-webpack, вы можете поместить его в свой файл конфигурации:

webpackMiddleware: {
 noInfo: true,
 stats: 'errors-only'
}

noInfo: false отображать информацию на консоль (только предупреждения и ошибки) документация

stats: 'errors-only' выводится только при возникновении ошибок документация

Ответ 8

quiet и no-info не помогли мне. Вместо этого я закончил использование фильтра grep.

npm run dev | grep -v "node_modules\|\[built\]"

Это приведет к удалению любой строки, содержащей [built] или node_modules, что упрощает просмотр фактических ошибок сборки без прокрутки пучка строк вывода терминала.

Я поместил это в раздел scripts моего package.json, поэтому я могу использовать npm run dev-quiet для получения отфильтрованного журнала результатов.

Ответ 9

Используя конфигурационный файл Webpack-Dev-Server, вы можете подключиться к API.

Использование noInfo: true отключит информационные сообщения, если у вас есть ошибка.

Использование quiet: true удаляет всю информацию о консоли, даже ошибки.

Ссылка: https://webpack.github.io/docs/webpack-dev-server.html#api

Ответ 10

Запустите webpack с опцией --hide-modules.

Ответ 11

При использовании webpack-dev-middleware теперь вы должны использовать logLevel вместо noInfo в параметрах конфигурации (по состоянию на 18.12.17]).

Пример:

require("webpack-dev-middleware")(compiler, {
    logLevel: "warn", // set the logLevel
});

Ответ 12

У меня была та же самая проблема, и мое решение не новое, но детализирует предыдущие ответы. В вашем webpack.dev.js вы можете использовать следующую конфигурацию для devServer. Обратите внимание на раздел stats:

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    historyApiFallback: true,
    compress: true,
    port: 3420,
    inline: true,
    stats: {
      colors: true,
      chunks: false,
      hash: false,
      version: false,
      timings: false,
      assets: false,
      children: false,
      source: false,
      warnings: true,
      noInfo: true,
      contentBase: './dist',
      hot: true,
      modules: false,
      errors: true,
      reasons: true,
      errorDetails: true,
    },
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin({
    }),
  ],
});