[英]Webpack inject js/css file content directly to index.html
我有這樣的代碼
<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>
並且我需要插件/加載器或其他方法來獲取帶有替換的html文件的鏈接和腳本標記，以顯示此文件的內容，有什么辦法嗎？
finnaly，我寫了適合我需要的插件， 包括file-webpack-plugin
實際上，可以通過以下方式實現：
npm i --save-dev css-loader to-string-loader 配置您的Webpack
module: [ rules: [ { test: /\\.css$/, use: ['to-string-loader', 'css-loader'] } ] } 然后在您的項目中，您可以像這樣以字符串形式訪問css
const cssContent= require('path_to_css/some_css.css'); console.log('your css is: ', cssContent.toString());
或者，您可能想通過以下方式將其手動注入到頁面中：
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); 參考
使用webpack-dev-server時，html-webpack-plugin不會將js文件注入index.html
[英]html-webpack-plugin not inject js file into index.html when using webpack-dev-server
Quasar SSR：使用引導文件將 HTML 內容注入 index.html
[英]Quasar SSR: Inject HTML content into index.html using boot file
Vue.js / Webpack 使用 CSS 和 JS 的“靜態”子域構建“index.html”
[英]Vue.js / Webpack build “index.html” using a “static” subdomain for CSS and JS
如何使用HTML Webpack插件將文件加載器所需的CSS文件包含到index.html中
[英]how to include css file required with file loader into index.html using html webpack plugin
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.