javascript - Webpack inject jscss file content directly to index.html

I have code like this

<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="path_to_css/some_css.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        ...
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="jquery/jquery.min.js"></script>
    </body>
</html>

and I need plugin/loader or other way to get my html file with replaced link and script tags to content of this files, is there any way to do it?

Finnaly i wrote own plugin which fit my needs include-file-webpack-plugin

I have code like this

<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="path_to_css/some_css.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        ...
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="jquery/jquery.min.js"></script>
    </body>
</html>

and I need plugin/loader or other way to get my html file with replaced link and script tags to content of this files, is there any way to do it?

Finnaly i wrote own plugin which fit my needs include-file-webpack-plugin

Share Improve this question edited Aug 2, 2017 at 6:42 Adi Prasetyo 1,0421 gold badge16 silver badges43 bronze badges asked Mar 28, 2017 at 15:26 jagwe danfesa 5631 gold badge5 silver badges11 bronze badges

2 I would try html-webpack-plugin. – Paul Kaspriskie Commented Mar 28, 2017 at 15:38
1 this plugin can't do this or i can't do this using this plugin only what i want is put content of css file into html – jagwe danfesa Commented Mar 28, 2017 at 15:40
1 @jagwedanfesa I guess you need to read the docs again. – Leo Commented Mar 28, 2017 at 23:38

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

It actually can be acplish with:

npm i --save-dev css-loader to-string-loader

configure your webpack with

module: [
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader']
      }
    ]
  }

Then in your project you can access the css as string like so

const cssContent= require('path_to_css/some_css.css'); console.log('your css is: ', cssContent.toString());

Or maybe you want inject it manually to the page with:

const boostrap= require('bootstrap/dist/css/bootstrap.min.css');
let style= document.createElement('style');
style.id= 'boostrap';
style.setAttribute('type', 'text/css');
style.innerHTML= boostrap.toString();
document.body.appendChild(style);

Reference

Inject CSS stylesheet
css-loader

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742284189a4415031.html

javascript - Webpack inject jscss file content directly to index.html - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Webpack inject jscss file content directly to index.html - Stack Overflow

1 Answer 1

相关推荐