Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

I tried mergeWithRules in my webpack5 environment, and index.html stopped being generated by HtmlWebPackPlugin

See original GitHub issue

For simple use-case: Here how i started it: "watch": "nodemon --exec \"cross-env NODE_OPTIONS=\"--no-deprecation\" webpack serve --progress --hot\""

/* eslint-env node */
/* eslint-disable import/first, node/no-unpublished-import */

require('@babel/register')({
  presets: ['@babel/preset-env']
});

import { mergeWithRules } from 'webpack-merge';
import WebpackBar from 'webpackbar';
import DotenvWebpackPlugin from 'dotenv-webpack';
import HtmlWebPackPlugin from 'html-webpack-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';

// import FaviconsWebpackPlugin from 'favicons-webpack-plugin';

import { PATHS } from './configs/paths';
import devConfig from './webpack.config.babel.dev';
import prodConfig from './webpack.config.babel.prod';

const imageChunkMaxSize = 20;
const getWebpackConfig = isProd => ({
  entry: {
    main: `${PATHS.src}/index.js`,
    icons: `${PATHS.src}/components/iconControls.js`
  },
  output: {
    path: PATHS.dist,
    filename: isProd ? '[name].[contenthash:8].js' : '[name].js',
    chunkFilename: isProd ? '[name].[contenthash:8].js' : '[name].js'
  },
  resolve: {
    mainFields: ['browser', 'main', 'module']
  },
  module: {
    rules: [{
      test: /\.(js(x)?)$/,
      exclude: /node_modules/,
      use: ['babel-loader?cacheDirectory', {
        loader: 'stylelint-custom-processor-loader',
        options: {
          emitWarning: true
        }
      }]
    }, {
      test: /\.(svg|eot|ttf|otf|woff(2)?)$/,
      include: PATHS.fonts,
      type: 'asset/resource',
      generator: { filename: isProd ? 'assets/fonts/[name].[contenthash:8][ext]' : 'assets/fonts/[name][ext]' }
    }, {
      test: /\.pdf$/,
      include: PATHS.pdfs,
      type: 'asset/resource',
      generator: { filename: isProd ? 'assets/pdf/[name].[contenthash:8][ext]' : 'assets/pdf/[name][ext]' }
    }, {
      test: /\.(png|gif|jp(e)?g)$/,
      include: PATHS.images,
      type: 'asset',
      parser: { dataUrlCondition: { maxSize: imageChunkMaxSize * 1024 } },
      generator: { filename: isProd ? 'assets/images/[name].[contenthash:8][ext]' : 'assets/images/[name][ext]' }
    }, {
      test: /\.svg$/,
      include: PATHS.images,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: [{
              removeViewBox: false
            }]
          }
        }
      }]
    }]
  },
  plugins: [
    new WebpackBar(),
    new DotenvWebpackPlugin({ systemvars: true }),
    new HtmlWebPackPlugin({
      base: '/',
      meta: {
        charset: 'utf-8',
        name: 'командировки, тревел-политики',
        // eslint-disable-next-line max-len
        description: 'Сервис организации командировок, финансовая отчетность, гибкие тревел-политики, интеграция с 1С, оргструктура компании',
        viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
      },
      templateContent: ({ webpackConfig: { mode } }) => {
        const jivositeScript = mode === 'production'
          ? '<script src="//code.jivosite.com/widget.js" data-jv-id="LpGpBx0wzW" defer></script>'
          : '';

        return `<html><head>
          <link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap&subset=cyrillic" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Rubik:400,700&display=swap&subset=cyrillic" rel="stylesheet">
          <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
          <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        </head><body><div id="react-app"></div>${jivositeScript}</body>`;
      }
    }),

    // TODO [2021-01-01]: migrate to webpack5 https://github.com/jantimon/favicons-webpack-plugin/issues/234
    // new FaviconsWebpackPlugin({
    //   logo: './src/assets/images/favicon.png',
    //   favicons: {
    //     appShortName: 'hrk',
    //     icons: {
    //       android: true,
    //       appleIcon: true,
    //       appleStartup: true,
    //       coast: true,
    //       favicons: true,
    //       firefox: true,
    //       windows: true,
    //       yandex: true
    //     }
    //   }
    // }),

    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false })
  ]
});

export default (_, { mode }) => {
  const isProd = mode === 'production';
  const webpackConfig = getWebpackConfig(isProd);
  return mergeWithRules()(webpackConfig, isProd ? prodConfig : devConfig);
};

this one prevent from generating index.html, but this one is working:

...
export default (_, { mode }) => {
  const isProd = mode === 'production';
  const webpackConfig = getWebpackConfig(isProd);
  return merge()(webpackConfig, isProd ? prodConfig : devConfig);
};

Issue Analytics

State:
Created 3 years ago
Comments:6 (5 by maintainers)

Top GitHub Comments

1reaction

bebrawcommented, Nov 12, 2020

@kristoforsalmin I also fixed the Prettier issue. Now it’s formatted based on Prettier 2. I changed the default branch of the project to develop so all PRs go against that in the future as I use master for releasing. 😄

1reaction

bebrawcommented, Nov 12, 2020

This should be fixed in 5.4.0. Please re-open or open a new issue if you still encounter this.

@kristoforsalmin Thanks for the PR!

Top Results From Across the Web

not getting generated using HtmlWebpackPlugin in webpack ...

I am trying to generate html using HtmlWebpackPlugin, my config file is as below const HtmlWebpackPlugin = require('html-webpack-plugin') ...

HtmlWebpackPlugin | webpack

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash...

Webpack HTML plug-in in a Nutshell - Jonathan Petitcolas

Using the Webpack HTML Plugin allows to overcome some limitations of the HTML file we used in the previous post.

Using the HTML Webpack Plugin for generating HTML files

I can now run webpack --config webpack.config.prod.js and see that three files are generated; my JS, my CSS and now an index.html too....

Stop using custom templates in your Webpack React apps

Google "webpack react" and you'll notice the top result guides all have one thing in common: they create custom HTML templates for their ......