Как исключить сделать чтобы chunks не накапливались в HtmlWebpackPlugin в webpack?

Webpack Веб-разработка

2 ответов

Подскажите, пожалуйста, как сделать чтобы webpack делал при сборке такую структуру директорий:
- dist/examples/basic-example
- dist/examples/comments
- dist/examples/connectors
- dist/examples/collapsable
Внутри каждой директории, чтобы был index.html но чтобы добавлялся только указанный в chunks свойстве собранный js-скрипт. Сейчас если не указывать excludeChunks, то во все index.html включаются все chunks указанные в конфигах к HtmlWebpackPlugin. Смотрел пример https://github.com/jantimon/html-webpack-plugin/bl..., но там все также при объявлении chunks и entry, хотя в примере от webpack работает, а в моем проекте нет.
Сейчас есть такой конфиг:

const path = require("path"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require('webpack'); const CopyPlugin = require("copy-webpack-plugin"); const { CleanWebpackPlugin } = require('clean-webpack-plugin');  module.exports = {   mode: 'development',   target: "web",   stats: {     errorDetails: true,     children: true,   },   entry: {     "examples/basic-example/basic-example": path.resolve(__dirname, 'src/examples/basic-example/basic-example.ts'),     "examples/collapsable/collapsable": path.resolve(__dirname, 'src/examples/collapsable/collapsable.ts'),     "examples/comments/comments": path.resolve(__dirname, 'src/examples/comments/comments.ts'),     "examples/connectors/connectors": path.resolve(__dirname, 'src/examples/connectors/connectors.ts'),   },   plugins: [     new CleanWebpackPlugin(),     new MiniCssExtractPlugin({       // Options similar to the same options in webpackOptions.output       // all options are optional       filename: "[name].css",       chunkFilename: "[id].css",       // ignoreOrder: false, // Enable to remove warnings about conflicting order     }),     new HtmlWebpackPlugin({       inject: true,       template: "src/examples/basic-example/index.html",       filename: "examples/basic-example/index.html",       chunks: 'examples/basic-example/basic-example',             excludeChunks: ['examples/basic-example/collapsable', 'examples/comments/comments', 'examples/connectors/connectors']     }),     new HtmlWebpackPlugin({       inject: true,       template: "src/examples/collapsable/index.html",       filename: "examples/collapsable/index.html",       chunks: 'examples/collapsable/collapsable',       excludeChunks: ['examples/basic-example/basic-example', 'examples/comments/comments', 'examples/connectors/connectors']     }),     new HtmlWebpackPlugin({       inject: true,       template: "src/examples/comments/index.html",       filename: "examples/comments/index.html",       chunks: 'examples/comments/comments',       excludeChunks: ['examples/basic-example/basic-example', 'examples/collapsable/collapsable', 'examples/connectors/connectors']     }),          new HtmlWebpackPlugin({       inject: true,       template: "src/examples/connectors/index.html",       filename: "examples/connectors/index.html",       chunks: 'examples/connectors/connectors',       excludeChunks: ['examples/basic-example/basic-example', 'examples/collapsable/collapsable', 'examples/comments/comments']     }),     new webpack.HotModuleReplacementPlugin(),     new CopyPlugin({       patterns: [         { from: "src/examples/headshots", to: "examples/headshots" },         { from: "src/examples/collapsable/img", to: "examples/collapsable/img" },         { from: "src/examples/comments/avatar.jpg", to: "examples/comments/avatar.jpg" }       ],     }),   ],   output: {     filename: "[name].js",     path: path.resolve(__dirname, "dist"),   },   devServer: {     compress: true,     port: 9000,     hot: true,   }, };

Дополнительно:

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Кирилл JS Ответ

Для того чтобы исключить накопление chunks в HtmlWebpackPlugin в webpack, можно использовать опцию `excludeChunks` в конфигурации HtmlWebpackPlugin. Эта опция позволяет исключить определенные chunks из генерации HTML файлов.

Пример использования опции `excludeChunks` в конфигурации HtmlWebpackPlugin:

```html

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  entry: {
    main: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      excludeChunks: ['vendor']
    })
  ]
};

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { main: './src/index.js', vendor: './src/vendor.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', excludeChunks: ['vendor'] }) ] };

```

В данном примере, мы исключаем chunk с именем 'vendor' из генерации HTML файла. Теперь при сборке проекта с помощью webpack, только chunk 'main' будет включен в сгенерированный HTML файл.

Таким образом, используя опцию `excludeChunks` в конфигурации HtmlWebpackPlugin, можно исключить определенные chunks из генерации HTML файлов и избежать их накопления.

Другие ответы (1) Ответить на вопрос

Никита Орлов

Для того чтобы исключить накопление chunks в HtmlWebpackPlugin в webpack, можно воспользоваться опцией `excludeChunks`. Эта опция позволяет исключить определенные chunks из генерации HTML файлов.

Прежде всего, убедитесь, что у вас установлен `html-webpack-plugin` плагин. Затем, в конфигурации webpack, где вы используете `HtmlWebpackPlugin`, добавьте опцию `excludeChunks` с массивом имен chunks, которые вы хотите исключить.

Вот пример кода:

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  entry: {
    app: './src/index.js',
    another: './src/another.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      excludeChunks: ['another'] // исключаем chunk 'another'
    })
  ]
};

const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { app: './src/index.js', another: './src/another.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', excludeChunks: ['another'] // исключаем chunk 'another' }) ] };

В приведенном примере, мы исключили chunk 'another' из генерации HTML файла с помощью опции `excludeChunks`. Теперь при сборке проекта только chunk 'app' будет добавлен в сгенерированный HTML файл.

Таким образом, используя опцию `excludeChunks` в `HtmlWebpackPlugin`, вы можете контролировать, какие chunks должны быть включены или исключены из генерации HTML файлов в webpack.

комментарий Отменить ответ

Вам также может быть интересно

печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ linkedin Из-за чего выкидывает из аккаунта LinkedIn? 1 ответ

Как исключить сделать чтобы chunks не накапливались в HtmlWebpackPlugin в webpack?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно