è¿�æ�¯ä¸�个å�¨html-webpack-pluginå�ºç¡�ä¸�ä¿®æ�¹ç��æ��件ï¼�å�¨å��æ�¥ç��æ��件ç��å�ºç¡�ä¸�ï¼�æ·»å� äº�csså��jsèµ�æº�è�ªå®�ä¹�注å�¥ä½�ç½®ç��å��è�½ã��
npm install html-tag-replace-webpack-plugin
html模�
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<title>html-replace-webpack-plugin demo</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
webpack.config.js
var HtmlTagReplaceWebpackPlugin = require('html-tag-replace-webpack-plugin')
module.exports = {
...
plugins: [
new HtmlTagReplaceWebpackPlugin({
inject: true,
injectPoint: {
css: ['<!-- inject:css -->', '<!-- endinject -->'],
js: ['<!-- inject:js -->', '<!-- endinject -->']
},
})
]
...
}
webpack�����html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="keywords" content="" />
<meta http-equiv="description" content="" />
<title>html-replace-webpack-plugin demo</title>
<!-- inject:css -->
<link href="/static/css/index.css" rel="stylesheet">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script type="text/javascript" src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/index.js"></script>
<!-- endinject -->
</body>
</html>
��API�html-webpack-plugin���
- injectPoint�
- Type:
Array
- Value:
[startTag, endTag]
- optionalï¼�å¦�æ��ä¸�设置æ¤å��æ�°ï¼�å°�ä¸�html-webpack-pluginå��è�½ç�¸å��
- Type: