npm.io
1.0.2 • Published 9 years ago

html-tag-replace-webpack-plugin

Licence
MIT
Version
1.0.2
Deps
5
Vulns
1
Weekly
0
SummaryDependencyVersions

html-tag-replace-webpack-plugin

这是一个在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

其他API与html-webpack-plugin相同。

新增的API：
  • injectPoint：
    • Type: Array
    • Value: [startTag, endTag]
    • optional，如果不è¾ç½æ­¤å‚数，将与html-webpack-plugin功能相同

Keywords

webpackplugintagreplacehtml