How to use mini-html-webpack-plugin - 10 common examples

webpackConfig = merge(webpackConfig, {
		// we need to follow our own entry point
		entry: config.require.concat([path.resolve(sourceDir, 'index')]),
		resolve: {
			alias: {
				// allows to use the compiler
				// without this, cli will overload the alias and use runtime esm
				vue$: require.resolve('vue/dist/vue.esm.js')
			}
		},
		plugins: [
			// in order to avoid collision with the preload plugins
			// that are loaded by the vue cli
			// we have to load these plugins last
			new StyleguidistOptionsPlugin(config),
			new MiniHtmlWebpackPlugin(htmlPluginOptions),
			new webpack.DefinePlugin({
				'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
				'process.env.STYLEGUIDIST_ENV': JSON.stringify(env)
			})
		]
	})

	// To have the hot-reload work on vue-styleguide
	// the HMR has to be loaded after the html plugin.
	// Hence this piece added last to the list of plugins.
	if (isProd) {
		const optimization = config.minimize
			? {
					minimizer: [
						new TerserPlugin({
							parallel: true,

let webpackConfig: Configuration = {
		entry: config.require.concat([path.resolve(sourceDir, 'index')]),
		mode: env,
		output: {
			path: config.styleguideDir,
			filename: 'build/[name].bundle.js',
			chunkFilename: 'build/[name].js',
			publicPath: '',
		},
		resolve: {
			extensions: ['.wasm', '.mjs', '.js', '.jsx', '.ts', '.tsx', '.json'],
			alias: {},
		},
		plugins: [
			new StyleguidistOptionsPlugin(config),
			new MiniHtmlWebpackPlugin(htmlPluginOptions),
			new webpack.DefinePlugin({
				'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
				'process.env.STYLEGUIDIST_ENV': JSON.stringify(env),
			}),
		],
		performance: {
			hints: false,
		},
	};

	if (isProd) {
		const minimizer = new TerserPlugin({
			/* eslint-disable @typescript-eslint/camelcase */
			terserOptions: {
				ie8: false,
				ecma: 5,

<title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences({ files: css, publicPath })}
              <style>
                body {
                  margin: 0;
                  background-color: #F8F5FD;
                  text-rendering: optimizeLegibility;
                }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences({ files: js, publicPath })}
            
          `,
    }),

template: ({ css, js, title, publicPath }: any) =>
        `
          
            
              
              <title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences({ files: css, publicPath })}
              <style>
                body {
                  margin: 0;
                  background-color: #F8F5FD;
                  text-rendering: optimizeLegibility;
                }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences({ files: js, publicPath })}
            
          `,
    }),

return context => {
    const scripts = HTMLPlugin.generateJSReferences(context.js, context.publicPath)
    return minify(
      template(Object.assign({}, context, { scripts })),
      {
        collapseWhitespace: true
      }
    )
  }
}

${generateCSSReferences(css, publicPath)}
      
      
      
    
    
      <div id="rsg-root"></div>
      ${generateJSReferences(js, publicPath)}
    
  `;

const template = fs.readFileSync(
            path.join(__dirname, 'src', 'styleguidist.html'),
            'utf-8',
        );
        return template
            .replace(
                '',
                `<title>${title}</title>`,
            )
            .replace(
                '',
                MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath),
            )
            .replace(
                '',
                MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath),
            );
    },
    sections: [

const template = ({
  title = 'ok',
  js,
  publicPath
}) => `




<style>*{box-sizing:border-box}body{font-family:system-ui,sans-serif;margin:0}</style>
<title>${title}</title>


<div id="root"></div>
${HTMLPlugin.generateJSReferences(js, publicPath)}


`

<title>${title}</title>
              ${MiniHtmlWebpackPlugin.generateCSSReferences(css, publicPath)}
              <style>
              body {
                margin: 0;
                text-rendering: optimizeLegibility;
              }
              </style>
            
            
              <div id="app"></div>
              ${MiniHtmlWebpackPlugin.generateJSReferences(js, publicPath)}
            
          `,
    }),

css = '',
  js,
  publicPath,
}) => `





<title>ok-mdx</title>
<style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style>
${css}


<div id="root">${html}</div>
${generateJSReferences(js, publicPath)}


`