时间戳

首页 > 解决方案 > 修改 Webpack 的 MainTemplate

webpack - 修改 Webpack 的 MainTemplate

问题描述

我想编写一个修改主模板的 Webpack 插件，这样我就可以在函数中插入一些额外的代码__webpack__require__。

/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // Some extra code here --------------------------------------
/******/
/******/        // Execute the module function!!
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/        // Flag the module as loaded
/******/        module.l = true;
/******/
/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }
/******/

有谁知道要使用哪些钩子以及如何执行此操作？

标签： webpack

解决方案

对于其他有兴趣做同样事情的人，以下代码适用于 Webpack v4：

webpack.config.js

const path = require('path');

class VendorImportPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.compilation.tap('VendorImport', compilation => {
            compilation.mainTemplate.hooks.localVars.tap('Require', (source) => {
                // return string for "localVars" section
                return `// New code in localVars section\n\m${source}`;
            });
            compilation.mainTemplate.hooks.require.tap('Resolve', (source) => {
                // return string for require function code
                return `// New code in require section\n\m${source}`;
            });
        });
    }
};

module.exports = {
    // ...
    plugins: [new VendorImportPlugin({
        // options
    })]
};

dist/main.js

(function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
    /******/    // New code in localVars section
    /******/
    /******/    // The module cache
    /******/    var installedModules = {};
    /******/
    /******/    // The require function
    /******/    function __webpack_require__(moduleId) {
    /******/
    /******/        // New code in require section
    /******/
    /******/        // Check if module is in cache
    /******/        if(installedModules[moduleId]) {
    /******/            return installedModules[moduleId].exports;
    /******/        }
    /******/        // Create a new module (and put it into the cache)
    /******/        var module = installedModules[moduleId] = {
    /******/            i: moduleId,
    /******/            l: false,
    /******/            exports: {}
    /******/        };
    /******/
    /******/        // Execute the module function
    /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    /******/        // Flag the module as loaded
    /******/        module.l = true;
    /******/
    /******/        // Return the exports of the module
    /******/        return module.exports;
    /******/    }
    /******/

推荐阅读