自定义 webpack 替换，如 [name]、[id]、[hash]，但我想构建自己的替换

Question

具体来说，我想构建将文件名（蛇形）转换为驼峰式的标签 [camelCaseName]。

但我似乎找不到任何关于如何构建我自己的自定义替换的说明。我想知道是否有人对此有一些资源或示例。

谢谢。

Answer 1

我想我已经通过查看处理 [name] (https://github.com/webpack/webpack/blob/master/lib/TemplatedPathPlugin.js) 的代码弄明白了。

我们可以编写一个挂钩到 asset-path 的插件。

const replacePathVariables = (path, data) => {
  const REGEXP_CAMEL_CASE_NAME = /\[camelcasename\]/gi;
    if (typeof path === "function") {
        path = path(data);
    }

  if (data && data.chunk && data.chunk.name) {
    return path.replace(
      REGEXP_CAMEL_CASE_NAME,
      data.chunk.name
        .replace(/(\-\w)/g, (matches) => { return matches[1].toUpperCase(); })
        .replace(/(^\w)/, (matches) => { return matches[0].toUpperCase(); })
    );
  } else {
    return path;
  }

};

class ExtraTemplatedPathPlugin {
    apply(compiler) {
    compiler.plugin("compilation", function(compilation) {
            const mainTemplate = compilation.mainTemplate;
            mainTemplate.plugin('asset-path', replacePathVariables);
        });
    }
}

以上代码支持替换[camelcasename].

自定义 webpack 替换，如 [name]、[id]、[hash]，但我想构建自己的替换

Custom webpack substitutions like [name], [id], [hash], but I want to build my own substitution

webpack

webpack-2