jag*_*esa 5 javascript webpack webpack-2
我有这样的代码
<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>
Run Code Online (Sandbox Code Playgroud)
我需要插件/加载程序或其他方式来获取我的 html 文件,并将链接和脚本标签替换为该文件的内容,有什么办法吗?
最后我写了自己的插件来满足我的需要 include-file-webpack-plugin
它实际上可以通过以下方式完成:
npm i --save-dev css-loader to-string-loader配置你的 webpack
module: [
rules: [
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader']
}
]
}
Run Code Online (Sandbox Code Playgroud)然后在您的项目中,您可以像这样访问 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);
Run Code Online (Sandbox Code Playgroud)参考