<p><code></p> <h1 id="articleHeader0">自定义plugin</h1> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var track = { hasTrack: true, hash: 'xxxx' }; function <a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>WebpackMonitorPlugin(options) {<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.options = options;<br /> }</p> <p><a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>WebpackMonitorPlugin.prototype.apply = function(compiler) {<br /> compiler.plugin('compilation', function(compilation, options) {<br /> compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {</p> <p> if (track.hasTrack) {<br /> var script = `<br /> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement(&quot;script&quot;); hm.src = &quot;https://hm.baidu.com/hm.js?` + track.hash + `&quot;; var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(hm, s); })(); </script><br /> `;<br /> htmlPluginData.html = htmlPluginData.html.replace('</body>', script + '</body>');<br /> }</p> <p> callback(null, htmlPluginData);<br /> });<br /> });<br /> };</p> <p>module.exports = HTMLWebpackMonitorPlugin;</p> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code><span class="hljs-keyword">var</span> track = { hasTrack: <span class="hljs-literal">true</span>, hash: <span class="hljs-string">'xxxx'</span> }; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title"><a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>WebpackMonitorPlugin</span><span class="hljs-params">(options)</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.options = options; } HTMLWebpackMonitorPlugin.prototype.apply = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(compiler)</span> </span>{ compiler.plugin(<span class="hljs-string">'compilation'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(compilation, options)</span> </span>{ compilation.plugin(<span class="hljs-string">'html-webpack-plugin-before-html-processing'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(htmlPluginData, callback)</span> </span>{ <span class="hljs-keyword">if</span> (track.hasTrack) { <span class="hljs-keyword">var</span> script = ` &lt;script&gt; <span class="hljs-keyword">var</span> _hmt = _hmt || []; (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword">var</span> hm = document.createElement(<span class="hljs-string">"script"</span>); hm.src = <span class="hljs-string">"https://hm.baidu.com/hm.js?` + track.hash + `"</span>; <span class="hljs-keyword">var</span> s = document.getElementsByTagName(<span class="hljs-string">"script"</span>)[<span class="hljs-number">0</span>]; s.parentNode.insertBefore(hm, s); })(); &lt;/script&gt; `; htmlPluginData.html = htmlPluginData.html.replace(<span class="hljs-string">'&lt;/body&gt;'</span>, script + <span class="hljs-string">'&lt;/body&gt;'</span>); } callback(<span class="hljs-literal">null</span>, htmlPluginData); }); }); }; module.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = HTMLWebpackMonitorPlugin; </code></pre> <h1 id="articleHeader1">使用方式</h1> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var htmlWebpackMonitorPlugin = require('./plugins/html-webpack-monitor-plugin'); new htmlWebpackMonitorPlugin(); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> htmlWebpackMonitorPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./plugins/html-webpack-monitor-plugin'</span>); <span class="hljs-keyword">new</span> htmlWebpackMonitorPlugin(); </code></pre> <h1 id="articleHeader2">vue router 添加</h1> <p>直接导入到html中是只有一次请求效果,所以需要添加到router切换中</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="router.beforeEach((to, from, next) => {<br /> if (to.path) {<br /> if (window._hmt) {<br /> window._hmt.push(['_trackPageview', '/#' + to.fullPath]);<br /> }<br /> }<br /> next();<br /> });<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs coffeescript"><code>router.beforeEach(<span class="hljs-function"><span class="hljs-params">(to, <span class="hljs-keyword">from</span>, next)</span> =&gt;</span> { <span class="hljs-keyword">if</span> (to.path) { <span class="hljs-keyword">if</span> (<span class="hljs-built_in">window</span>._hmt) { <span class="hljs-built_in">window</span>._hmt.push([<span class="hljs-string">'_trackPageview'</span>, <span class="hljs-string">'/#'</span> + to.fullPath]); } } next(); }); </code></pre> <h1 id="articleHeader3">webpack 自定义插件</h1> <h2 id="articleHeader4">compile</h2> <p>compiler是webpack的'编译器'引用; 所以compiler.plugin('compile')就代表:当编译器监听到compile事件时,我们应该做些什么</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="compiler.plugin(&quot;compile&quot;, function(params) { console.log(&quot;The compiler is starting to compile...&quot;); }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>compiler.plugin(<span class="hljs-string">"compile"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(params)</span></span> { console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"The compiler is starting to compile..."</span>); }); </code></pre> <h2 id="articleHeader5">compilation</h2> <p>compilation('编译器'对'编译ing'这个事件的监听); 在compilation事件监听中,我们可以访问compilation引用,它是一个代表编译过程的对象引用;<br />我们一定要区分compiler和compilation,一个代表编译器实体,另一个代表编译过程</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="compiler.plugin(&quot;compilation&quot;, function(compilation) { console.log(&quot;The compiler is starting a new compilation...&quot;); compilation.plugin(&quot;optimize&quot;, function() { console.log(&quot;The compilation is starting to optimize files...&quot;); }); }); " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs lua"><code>compiler.plugin(<span class="hljs-string">"compilation"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(compilation)</span></span> { console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"The compiler is starting a new compilation..."</span>); compilation.plugin(<span class="hljs-string">"optimize"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span> { console.<span class="hljs-built_in">log</span>(<span class="hljs-string">"The compilation is starting to optimize files..."</span>); }); }); </code></pre> <p>详情<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>参考: <a href="http://www.css88.com/doc/webpack2/api/plugins/" rel="nofollow noreferrer" target="_blank">http://www.css88.com/doc/webp...</a></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26891.html