template-extract-plugin weekly downloads statistics

template-extract-plugin(webpack模板抽取插件)

初衷

为了解决前端分享截图痛点，旨在项目 webpack 打包阶段，提取出分享DOM的信息。

从 html-webpack-plugin 中提取 css 和 html，并全局输出 get_extract_template 方法，获取相应的模板。

Note：插件强依赖 html-webpack-plugin，请确保项目中已经安装

使用

安装

项目配置

步骤 1：在 index.html/ejs 中添加模板注释

• style 标签插入的位置 • 动态DOM插入的位置 • JS代码插入的位置 • 需要移除的代码块起始标志 • 需要移除的代码块结束标志

也可通过配置Plugin的参数，指定js插入的位置

步骤 2： 配置你的 webpack.config.js

Note：插件强依赖 css-loader 和 html-webpack-plugin，请优先注册 html-webpack-plugin 保证顺序，注意 TemplateExtractPlugin.loader 和 css-loader 的顺序。

应用

在代码中获取(以React项目为例)

Note：如果你的静态资源 src 地址是自动获取 protocol 的方式(//cdn.xxx.com/image.jpg)，可能你需要手动为其添加 protocol，以便它能在无头浏览器中正常执行。