Webpack чанки. Как подключить только свои js и css файлы в html файлы?

Question

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

const PATHS = {
  src: path.join(__dirname, '../src'),
  dist: path.join(__dirname, '../dist'),
  site_pages: path.join(__dirname, '../src/components/site-pages'),
  assets: 'assets/'
}

const PAGES_DIR = `${PATHS.src}/pages`
const PAGES = fs.readdirSync(PAGES_DIR).filter(filename => filename.endsWith('.pug'))

module.exports = {
  externals: {
    paths: PATHS
  },
  entry: {
    app: PATHS.src,
    "room-details": `${PATHS.site_pages}/room-details/room-details.js`,
  },
  output: {
    filename: `${PATHS.assets}js/[name].[hash].js`,
    path: PATHS.dist,
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendors',
          test: /node_modules/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },
  module: {
    rules: [{
      test: /\.pug$/,
      loader: 'pug-loader'
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/'
    }, {
      test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
      loader: 'url-loader',
      options: {
        outputPath: "assets/fonts",
        publicPath: "../fonts",
        name: '[name].[ext]',
        limit: 1000
      }
    }, {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'url-loader',
      options: {
        name: '[name].[ext]'
      }
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
          loader: 'css-loader',
          options: {
            sourceMap: true
          }
        }, {
          loader: 'postcss-loader',
          options: {
            sourceMap: true,
            config: {
              path: `./postcss.config.js`
            }
          }
        }, {
          loader: 'sass-loader',
          options: {
            sourceMap: true
          }
        }
      ]
    }]
  },
  resolve: {
    alias: {
      '~': 'src'
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      '$': 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jquery': 'jquery',
      'window.jQuery': 'jquery',
    }),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: `${PATHS.assets}css/[name].[hash].css`,
    }),
    new CopyWebpackPlugin([{
        from: `${PATHS.src}/components/**/*.{jpg,jpeg,png,svg,gif}`,
        to: `${PATHS.assets}img`,
        flatten: true
      },
      {
        from: `${PATHS.src}/static`,
        to: ''
      },
    ]),

    ...PAGES.map(
      page =>
      new HtmlWebpackPlugin({
        template: `${PAGES_DIR}/${page}`, // .pug
        filename: `./${page.replace(/\.pug/,'.html')}` // .html
      })
    )
  ],
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Menu</title>
  <meta name="description" content="navigation page">
  <link href="assets/css/vendors.25026dde96cf2da3a1b5.css" rel="stylesheet">
  <link href="assets/css/app.25026dde96cf2da3a1b5.css" rel="stylesheet">
  <link href="assets/css/room-details.25026dde96cf2da3a1b5.css" rel="stylesheet">
</head>

<body>
  <!-- code -->
  <script type="text/javascript" src="assets/js/vendors.25026dde96cf2da3a1b5.js"></script>
  <script type="text/javascript" src="assets/js/app.25026dde96cf2da3a1b5.js"></script>
  <script type="text/javascript" src="assets/js/room-details.25026dde96cf2da3a1b5.js"></script>
</body>

</html>

room-details.css и room-details.js файлы добавляются в index.html и файлы всех остальных страниц тоже, но в нём не должно их быть, они должны добавляться только в room-details.html

сейчас:

//page-name.html
app
vendors
page-name
page-name2
page-name3
...
page-nameN

должно быть:

//page-name.html
app
vendors
page-name

Как это сделать?

Answer 1

Нужно добавить в HtmlWebpackPlugin ключ chunks, например:

chunks: ['page1', 'page2', 'page3'...],

БЛОГ НА HUSL

Webpack чанки. Как подключить только свои js и css файлы в html файлы?

Ответы (1 шт):