javascript - Webpack 4 - 将 css 文件添加到多个 html 文件

Question

我想捆绑几个 html 文件并在所有文件中添加一个 css 文件。但我的 webpack 配置仅将 css 和 js 捆绑文件添加到 index.html

我的文件如下所示:

我想将此 main-hash.js 和 main-hash.css 添加到所有 HTML 文件中:about.html、index.html、contact.html

另外当我从文件加载器中排除index.html(下面的评论)时，我的index.html无法识别公共(public)文件夹/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 文件注入(inject)到每个 html 文件中。