Template生成模板

Template生成模板的基本概念

Webpack中的Template生成模板是指通过预定义的模板结构动态生成代码或配置的方式。这种方式在构建过程中特别有用，能够根据不同的环境或条件生成定制化的输出。Template通常结合Webpack的loader和plugin机制使用，提供了一种灵活的方式来处理模块化代码。

// 一个简单的Template示例
const template = function(source) {
  return `export default ${JSON.stringify(source)}`;
};

Webpack中常见的Template类型

1. 模块化Template

模块化Template主要用于生成CommonJS、AMD或ES模块格式的代码。Webpack内部使用这种Template来处理模块依赖关系。

// 模块化Template示例
function moduleTemplate(module) {
  return `
    (function(module, exports, __webpack_require__) {
      ${module.source}
    })
  `;
}

2. 运行时Template

运行时Template负责生成Webpack的运行时代码，包括模块加载、缓存管理等核心功能。

// 运行时Template片段
const runtimeTemplate = `
  // 模块缓存
  var installedModules = {};
  
  // Webpack的require函数
  function __webpack_require__(moduleId) {
    // 检查缓存
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 创建新模块
    var module = installedModules[moduleId] = {
      exports: {}
    };
    // 执行模块函数
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 返回模块导出
    return module.exports;
  }
`;

3. 热更新Template

热模块替换(HMR)相关的Template用于生成客户端热更新逻辑。

// HMR Template示例
const hmrTemplate = `
  if(module.hot) {
    module.hot.accept();
    module.hot.dispose(function() {
      // 清理逻辑
    });
  }
`;

自定义Template的实现方式

1. 使用Webpack插件创建Template

可以通过编写Webpack插件来自定义Template生成逻辑。

class MyTemplatePlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap('MyTemplatePlugin', (compilation) => {
      compilation.mainTemplate.hooks.render.tap(
        'MyTemplatePlugin',
        (source, chunk, hash) => {
          return `// 自定义模板头部\n${source}\n// 自定义模板尾部`;
        }
      );
    });
  }
}

2. 基于字符串替换的Template

简单的字符串替换方式实现基础模板功能。

function simpleTemplate(templateStr, data) {
  return templateStr.replace(/\${(\w+)}/g, (match, key) => {
    return data[key] || match;
  });
}

const result = simpleTemplate('Hello ${name}!', { name: 'Webpack' });
console.log(result); // 输出: Hello Webpack!

高级Template技巧

1. 条件性Template生成

根据不同的构建环境生成不同的模板内容。

function envAwareTemplate(env) {
  return `
    ${env === 'production' ? 
      '// 生产环境代码' : 
      '// 开发环境代码'}
    console.log('当前环境: ${env}');
  `;
}

2. 动态依赖注入

通过Template动态注入模块依赖关系。

function generateDependencyTemplate(deps) {
  const requires = deps.map(dep => 
    `var ${dep.name} = __webpack_require__('${dep.id}');`
  ).join('\n');
  
  return `
    // 依赖声明
    ${requires}
    
    // 模块代码
    module.exports = function() {
      return {
        ${deps.map(dep => `${dep.name}: ${dep.name}`).join(',\n')}
      };
    };
  `;
}

Template性能优化

1. 预编译Template

将频繁使用的Template预编译成函数，提高执行效率。

function compileTemplate(templateStr) {
  const tokens = templateStr.split(/\${(\w+)}/);
  return function(data) {
    let output = '';
    for(let i = 0; i < tokens.length; i++) {
      output += i % 2 === 0 ? tokens[i] : (data[tokens[i]] || '');
    }
    return output;
  };
}

const compiled = compileTemplate('Hello ${name}!');
console.log(compiled({ name: 'World' })); // 输出: Hello World!

2. 缓存生成的Template

对生成的Template进行缓存，避免重复计算。

const templateCache = new Map();

function getCachedTemplate(key, generator) {
  if(!templateCache.has(key)) {
    templateCache.set(key, generator());
  }
  return templateCache.get(key);
}

Template在Webpack配置中的应用

1. 动态生成入口配置

使用Template动态生成Webpack的entry配置。

function generateEntryTemplate(pages) {
  return pages.reduce((entry, page) => {
    entry[page.name] = `./src/pages/${page.name}/index.js`;
    return entry;
  }, {});
}

// 使用示例
const entryConfig = generateEntryTemplate([
  { name: 'home' },
  { name: 'about' },
  { name: 'contact' }
]);

2. 生成多环境配置

基于Template生成不同环境的Webpack配置。

function createConfigTemplate(env) {
  return {
    mode: env,
    devtool: env === 'production' ? 'source-map' : 'eval-source-map',
    output: {
      filename: env === 'production' ? '[name].[contenthash].js' : '[name].js'
    },
    plugins: [
      env === 'production' ? new CleanWebpackPlugin() : new webpack.HotModuleReplacementPlugin()
    ]
  };
}

Template与Webpack Loader的结合

1. 在Loader中使用Template

Loader中可以利用Template来生成特定格式的输出。

module.exports = function(source) {
  return `
    // 自动生成的模块头部
    var module = {};
    
    // 原始代码
    ${source}
    
    // 自动生成的模块导出
    module.exports = exports;
  `;
};

2. 动态Loader生成

基于Template动态生成Loader配置。

function createLoaderTemplate(rules) {
  return rules.map(rule => {
    return {
      test: new RegExp(rule.pattern),
      use: rule.loaders.map(loader => ({
        loader,
        options: rule.options || {}
      }))
    };
  });
}

Template在代码分割中的应用

1. 动态生成分割点

使用Template在代码中动态插入分割点。

function createSplitTemplate(chunkName) {
  return `
    import(/* webpackChunkName: "${chunkName}" */ './${chunkName}')
      .then(module => {
        console.log('${chunkName} loaded');
      });
  `;
}

2. 生成预加载指令

动态生成资源预加载的Template。

function generatePreloadTemplate(resources) {
  return resources.map(resource => {
    return `
      <link rel="preload" href="${resource.url}" as="${resource.type}">
    `;
  }).join('\n');
}

Template错误处理模式

1. 错误边界Template

生成包含错误处理的组件Template。

function errorBoundaryTemplate(componentName) {
  return `
    class ${componentName} extends React.Component {
      state = { hasError: false };
      
      static getDerivedStateFromError() {
        return { hasError: true };
      }
      
      render() {
        if(this.state.hasError) {
          return <div>Error occurred in ${componentName}</div>;
        }
        return this.props.children;
      }
    }
  `;
}

2. 错误上报Template

生成包含错误上报逻辑的代码Template。

function errorReportTemplate(apiUrl) {
  return `
    window.addEventListener('error', (event) => {
      fetch('${apiUrl}', {
        method: 'POST',
        body: JSON.stringify({
          message: event.message,
          stack: event.error.stack,
          timestamp: Date.now()
        })
      });
    });
  `;
}

Template与Web Worker集成

1. Worker生成Template

动态生成Web Worker代码的Template。

function workerTemplate(workerCode) {
  const blob = new Blob([workerCode], { type: 'application/javascript' });
  return URL.createObjectURL(blob);
}

// 使用示例
const workerUrl = workerTemplate(`
  self.onmessage = function(e) {
    const result = e.data * 2;
    self.postMessage(result);
  };
`);

2. Worker通信Template

生成标准化的Worker通信协议Template。

function createWorkerCommTemplate(worker) {
  return {
    send: (type, data) => {
      worker.postMessage({ type, data });
    },
    on: (type, handler) => {
      worker.addEventListener('message', (e) => {
        if(e.data.type === type) {
          handler(e.data.data);
        }
      });
    }
  };
}

Template版本控制策略

1. 基于内容的哈希生成

生成包含内容哈希的资源引用Template。

function hashedAssetTemplate(filename, content) {
  const hash = require('crypto')
    .createHash('md5')
    .update(content)
    .digest('hex')
    .substr(0, 8);
  
  return `${filename}?v=${hash}`;
}

2. 版本清单生成

生成包含所有资源版本信息的清单文件Template。

function generateManifestTemplate(assets) {
  return JSON.stringify(
    assets.reduce((manifest, asset) => {
      manifest[asset.name] = asset.hashedName;
      return manifest;
    }, {}),
    null,
    2
  );
}