How to compile all included files into one index.html?

U

Uncle Vanya2019-10-25 15:47:24

JavaScript

Uncle Vanya, 2019-10-25 15:47:24

Guys, please tell me how to solve my build problem ....
In general, using webpack, I collect everything in the dist folder (index.html, main.js, style.css) . Now we need to make a build that will insert all the files into index.html
Not like this:

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <style src="./style.css"></style>
</head>
<body>
  <div class="content"></div>
</body>
<script> src="./src/js/index.js"</script>
</html>

But like this:

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
<style type="text/css">html, body {
  margin: 0;
  padding: 0;
  overflow: hidden; }
</style></head>
<body>
  <div class="content"></div>
</body>
<script>
  class Temp{
    constructor() {
      this.name = 'Olexiy'
    }

    init() {
      console.log('INIT')
    }
  }
</script>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

U

Uncle Vanya, 2019-10-25
@QSem

The issue was resolved by typing ....
In WebPack config, their description is apparently not working ....

plugins: [
        new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            title: "clear engine",
            template: "index.html",
            inlineSource: '.(js|css)$' // embed all javascript and css inline
        }),
        new HtmlWebpackInlineSourcePlugin()
    ],

This is how it didn't work: This is how it works:
inlineSource: '.js|css'

D

Destell, 2019-10-25
@Destell

html-webpack-inline-source-plugin