This is what my webpack.config.js looks like, I want one style file to be in <head> , and the second file to be connected in the <link> at the bottom <body>

I thought you could do it with the style-ext-html-webpack-plugin-webpack-4 plug-in, but it doesn't work, in theory when setting the position you can set where to rewrite <link> , however, it doesn't work, the file disappears from the file system (as if connected) but <style> does not appear in the html file with the contents, probably the error of the plugin itself.

If I have an error somewhere, please tell me! Or if the truth is in the plugin, tell me how you can achieve the same result in another way. Thank!

 const styles = require('./webpack/styles'), scripts = require('./webpack/scripts'), img = require('./webpack/img'), fonts = require('./webpack/fonts'), path = require('path'), Html = require('html-webpack-plugin'), ExtractTextPlugin = require("extract-text-webpack-plugin"), Imagemin = require('imagemin-webpack-plugin').default, StyleExtHtml = require('style-ext-html-webpack-plugin-webpack-4'), Clean = require("clean-webpack-plugin"); module.exports = (env, options) => { const isDevMode = options.mode === "development"; const dist = path.join(__dirname, 'dist'); const src = path.join(__dirname, 'src'); return { context: src, entry: { main: './index.tsx', head: './styles/style-for-head.styl', }, output: { path: dist, filename: 'js/[name].js', }, devtool: isDevMode && 'source-map', devServer: { overlay: true, // host: '192.168.1.71', }, resolve: { extensions: [".ts", ".tsx", ".js"] }, plugins: [ new Html({ template: 'index.html' }), new ExtractTextPlugin('css/[name].css'), // Вот подключение этого плагина new StyleExtHtml({ file: 'css/head.css', // position: 'body-bottom' // файл стилей удалится из системы, но в html так и не появится его содержимое }), new Clean([dist]), new Imagemin({ test: /\.(png|gif|jpe?g|svg)$/i }), ], module: { rules: [ styles(isDevMode), scripts(), img(), fonts() ], }, } };

  • In the html-webpack-plugin there is an inject parameter, if you specify new HtmlWebpackPlugin({ template: './index.html', inject: 'body' }) - then all the static plugin injects into badi, and not in the head - overthesanity sep
  • Unfortunately, inject: 'body' moves only the connection of scripts. But, even if he moved the link, he would most likely transfer the link that I want to leave to the head - Igor
  • This is not the point. What is the point of extract-text-webpack-plugin - if you still want to inject styles after DOM loading, if you use the usual style-loader + css-loader , then the styles will be thrown in the js file and injected into the head inline in style tag - overthesanity
  • I understand, change the text. I want the head to have the styles in style, and below the body in link - Igor
  • how are you going to put the link in the body? This element defines a link. It may only appear in the HEAD section of a document, although it may appear any number of times. - overthesanity

0