tff-tailor/lib/plugin/html-webpack-replace-plugin.js

tailor for toursforfun frontend

/**
 * html webpack replace plugin
 * @param {Object} options
 */
var HtmlWebpackPluginReplace = function(options) {
    this.options = Object.assign({
        replace: function(html) {
            return html;
        }
    }, options);
};

/**
 * apply function from compiler
 * @see https://webpack.github.io/docs/how-to-write-a-plugin.html
 * @see http://webpack.github.io/docs/plugins.html
 * @see http://www.alloyteam.com/2016/01/webpack-loader-1/
 * @see https://doc.webpack-china.org/development/plugin-patterns/
 * @param  {[type]} compiler [description]
 * @return {[type]}          [description]
 */
HtmlWebpackPluginReplace.prototype.apply = function(compiler) {
    let that = this,
        opts = that.options,
        config = opts.config;

    compiler.plugin("compilation", function(compilation) {
        compilation.plugin("html-webpack-plugin-before-html-processing", (htmlPluginData, callback) => {
            that.replace(compilation, htmlPluginData, callback);
        });
    });

    //compilation.module-asset
    // compiler.plugin("emit", function(compilation, callback) {
    //     compilation.chunks.forEach(function(chunk) {
    //         // Explore each module within the chunk (built inputs):
    //         chunk.modules.forEach(function(module) {
    //             // Explore each source file path that was included into the module:
    //             module.fileDependencies.forEach(function(filepath) {
    //                 // we've learned a lot about the source structure now...
    //                 // console.log(filepath);
    //             });
    //         });

    //         // Explore each asset filename generated by the chunk:
    //         chunk.files && chunk.files.forEach(function(filename) {
    //             // Get the asset source for each file generated by the chunk:
    //             var source = compilation.assets[filename].source();
    //         });
    //     });

    //     compilation.mainTemplate.plugin("startup", function(source, module, hash) {
    //         console.log(source);
    //     });
    //     callback();
    // });

    // compiler.plugin("make", function(compilation, callback) {
    //     compilation.plugin("normal-module-loader", function(loaderContext, module) {
    //         let issuer = module.issuer;

    //         if (issuer) {
    //             let code = module.issuer._source._value,
    //                 modName = issuer.context.replace(Path.join(config.basic.root, config.basic.src), "").replace(/[\\\/]/g, "/");

    //             // module.issuer._source._value = code.replace(/(require\.ensure\([\s\S]+,[\s\S]+)\)/img, `$1,"${modName}/_parts")`);
    //             // console.log(module.issuer._source._value);
    //         }
    //     });
    //     callback();
    // });
};

/**
 * replace function
 * @param  {Compilation}   compilation    [description]
 * @param  {Object}   htmlPluginData [description]
 * @param  {Function} callback       [description]
 * @return {Void}                  [description]
 */
HtmlWebpackPluginReplace.prototype.replace = function(compilation, htmlPluginData, callback) {
    let html = htmlPluginData.html,
        outputName = htmlPluginData.outputName,
        assets = htmlPluginData.assets,
        chunks = Object.keys(assets.chunks || {}),
        js = assets.js || [],
        css = assets.css || [],
        options = this.options;

    htmlPluginData.html = options.replace(html, {
        chunks: chunks,
        js: js,
        css: css,
        htmlPluginData: htmlPluginData
    });

    callback(null, htmlPluginData);
};　

//TODO
function addJs(js) {
    let items = [];

    js.forEach((item) => {
        item = item.replace(/\\/g, "/");
        items.push(`<script src="${item}" type="text/javascript" defer="true"></script>`);
    });

    //todo
    let bsClient = `<script async src="//duang.tff.com:8080/browser-sync/browser-sync-client.js"><\/script>;`;

    items.push(bsClient);

    return `\n@prepend("scripts-head")\n${items.join("\n")}\n@endprepend\n`;
}

function addCss(css) {
    let items = [];

    css.forEach((item) => {
        item = item.replace(/\\/g, "/");
        items.push(`<link href="${item}" rel="stylesheet">`);
    });

    return `\n@prepend("styles-head")\n${items.join("\n")}\n@endprepend\n`;
}