Insert-widgets-tags-plugin NPM

背景

本插件是一个基本HTML插值插件，不适用于其他任何开发场景，仅做示范用；仅供新手学习，请勿转载，谢谢配合

npm源地址

安装

npm install -D insert-widgets-tags-plugin

参数

test : 必传参数 : 必须是包含.html的正则表达式 : 默认值为 /.html/ig

widgetsMap : 必传参数 : 页面需要引入的微组件集合 : 格式如下示例

mixNum : 必传参数 : 数字类型，确定一个URL拼接多少微组件地址

cssPreload : bool类型 : 是否CSS预加载

jsPreload : bool类型 : 是否JS预加载

env : 当前环境 : 默认'prd', 支持 'stg': 测试环境, 'prd'：生产环境

position : 字符串类型，确定JS脚本插入BODY元素中的位置 : 可输入值为 'top': 插入BODY元素的头部; 'bottom': 插入BODY元素的头部; '自定义标签': 替换HTML中 custom-自定义标签 注意：自定义标签必须在HTML文件中，提前写好==<custom-自定义标签></custom-自定义标签>==，否则不生效 例如： position: 'widgets', 需要在html中存在==

自定义标签插入示例

参数配置

new InsertWidgetsTagsPlugin({
      test: /.html/ig,
      widgetsMap: widgetsMap,
      mixNum: 1,
      cssPreload: true,
      jsPreload: true,
      position: 'widgets',
      env: 'stg'
})

模板配置

<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="shortcut icon" href="static/favicon.ico" />
  <script src="static/iconfont.js"></script>
  <script>
    var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?1d4099e9f127a3d89f5334a970ce2196";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s)})();
  </script>
  <title>vue news</title>
</head>
<body>
    <div id="app"></div>
    <!-- 自定义标签,当使用自定义插入位置时，必须存在 -->
    <custom-widgets></custom-widgets>
    <div id="float"></div>
</body>
</html>

使用示例

'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')

// 引入InsertWidgetsTagsPlugin插件
const InsertWidgetsTagsPlugin = require('insert-widgets-tags-plugin')
// 配置参数，一定是这种格式，并且KEY值必须是打包生成的.HTML文件名称
const widgetsMap = {
  'index': [
    {
      ns: 'cfb',
      name: 'productDetailShelf'
    },
    {
      ns: 'cfb',
      name: 'infoPosition'
    },
    {
      ns: 'cfb',
      name: 'assetDetail'
    },
    {
      ns: 'cfb',
      name: 'investSummaryTend'
    },
    {
      ns: 'cfb',
      name: 'investSummaryDetailTrend'
    }
  ]
};

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // 使用InsertWidgetsTagsPlugin插件
    new InsertWidgetsTagsPlugin({
      test: /.html/ig,
      widgetsMap: widgetsMap,
      mixNum: 1,
      cssPreload: true,
      jsPreload: true,
      position: 'widgets',
      env: 'stg'
    })
  ]
})

module.exports = webpackConfig

widgets webpack plugin

chalk webpack

1.0.1

4 years ago

1.0.0

4 years ago