我有这样的代码
<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 文件,并将替换的链接和脚本标签添加到此文件的内容中,有什么办法可以做到吗?
最后我写了自己的插件来满足我的需要 include-file-webpack-plugin
最佳答案
实际上可以通过以下方式完成:
npm i --save-dev css-loader to-string-loader
使用
配置您的 webpackmodule: [ rules: [ { test: /\.css$/, use: ['to-string-loader', 'css-loader'] } ] }
然后在您的项目中,您可以像这样以字符串形式访问 css
const cssContent= require('path_to_css/some_css.css'); console.log('你的 css 是:', cssContent.toString());
或者您可能想手动将其注入(inject)页面:
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);
引用
关于javascript - Webpack 直接注入(inject) js/css 文件内容到 index.html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43073673/