Webpack 4 - Добавить CSS-файл в несколько HTML-файлов

Question

Я хочу связать пару файлов HTML и добавить один файл CSS во все из них. Но моя конфигурация веб-пакета добавляет только файлы css и js в index.html

Мои файлы выглядят так:

Я хочу добавить файлы main-hash.js и main-hash.css во все файлы HTML: about.html, index.html, contact.html

Также , когда я исключаю index.html (комментарий ниже) из загрузчика файлов, мой index.html не распознает пути для общей папки /images. Есть идеи ??

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.js',

  output: {
    filename: '[name]-[hash:8].js',
    path: path.resolve(__dirname, 'dist')
  },

  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),

    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css'
    }),
    new CleanWebpackPlugin()
  ],

  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        include: [path.resolve(__dirname, 'src')],
        loader: 'babel-loader',

        options: {
          plugins: ['syntax-dynamic-import'],

          presets: [
            [
              '@babel/preset-env',
              {
                modules: false
              }
            ]
          ]
        },
        exclude: '/node_modules/'
      },
      {
        test: /\.(png|jpeg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: './src/images',
              outputPath: './assets',
              name: '[name].[ext]'
            }
          }
        ]
      },
      {
        test: /\.(html)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].html'
            }
          },
          { loader: 'extract-loader' },
          {
            loader: 'html-loader',
            options: {
              attrs: ['img:src']
            }
          }
        ],
        // HERE 
        exclude: path.resolve(__dirname, './src/index.html')
      },

      {
        test: /\.sass$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },

  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        }
      },

      chunks: 'async',
      minChunks: 1,
      minSize: 30000,
      name: true
    }
  },

  devServer: {
    open: true
  }
};

Answer 1

Вы можете добавить несколько экземпляров HtmlWebpackPlugin , по одному для каждого из ваших HTML-файлов:

plugins: [
  new webpack.ProgressPlugin(),

  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
  }),

  new HtmlWebpackPlugin({
    filename: 'about.html',
    template: './src/about.html'
  }),

  new HtmlWebpackPlugin({
    filename: 'contact.html',
    template: './src/contact.html'
  }),

  new MiniCssExtractPlugin({
    filename: '[name].[hash:8].css'
  }),

  new CleanWebpackPlugin()
],

Это должно внедрить файлы JS и CSS в каждый HTML-файл.