vue js 添加百度统计

自定义plugin

var track =  {
    hasTrack: true,
    hash: 'xxxx'
};


function HTMLWebpackMonitorPlugin(options) {
    this.options = options;
}

HTMLWebpackMonitorPlugin.prototype.apply = function(compiler) {
    compiler.plugin('compilation', function(compilation, options) {
        compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
            
                if (track.hasTrack) {
                    var script = `
                        <script>
                            var _hmt = _hmt || [];
                            (function() {
                              var hm = document.createElement("script");
                              hm.src = "https://hm.baidu.com/hm.js?` + track.hash + `";
                              var s = document.getElementsByTagName("script")[0]; 
                              s.parentNode.insertBefore(hm, s);
                            })();
                        </script>
                    `;        
                    htmlPluginData.html = htmlPluginData.html.replace('</body>', script + '</body>');
                }
                
            
            
            callback(null, htmlPluginData);
        });
    });
};

module.exports = HTMLWebpackMonitorPlugin;

使用方式

var htmlWebpackMonitorPlugin = require('./plugins/html-webpack-monitor-plugin');
new htmlWebpackMonitorPlugin();

vue router 添加

直接导入到html中是只有一次请求效果，所以需要添加到router切换中

router.beforeEach((to, from, next) => {
    if (to.path) {
        if (window._hmt) {
            window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
        }
    }
    next();
});

webpack 自定义插件

compile

compiler是webpack的'编译器'引用; 所以compiler.plugin('compile')就代表：当编译器监听到compile事件时，我们应该做些什么

compiler.plugin("compile", function(params) {
      console.log("The compiler is starting to compile...");
});

compilation

compilation（'编译器'对'编译ing'这个事件的监听）; 在compilation事件监听中，我们可以访问compilation引用，它是一个代表编译过程的对象引用;
我们一定要区分compiler和compilation，一个代表编译器实体，另一个代表编译过程

compiler.plugin("compilation", function(compilation) {
     console.log("The compiler is starting a new compilation...");
     compilation.plugin("optimize", function() {
     console.log("The compilation is starting to optimize files...");
    });
});

详情API参考: http://www.css88.com/doc/webp...