Question

如果我通过string.replace（）来更改模块源的长度，

compiler.hooks.shouldEmit.tap('WebpackSvgSpritely', compilation => {
  Object.keys(compilation.modules).map((i) => {
    const source = compilation.modules[i]._source;
    if (source) {
      const value = source._value;
      value = value.replace('iconset-[hash].svg', 'iconset-1234567890.svg');
    }
  });

  return true;
});

我的包输出出现乱码，和谐输出被错误地直接插入到我的代码中间：

// Incorrect
var Icon = function Icon() {
  xhr.open('GET', 'img/iconset-1234567890.svg', true);
  xhr.s/* harmony default export */ __webpack_exports__["a"] = (init););
};

export default Icon;

尽管没有字符串替换（也没有更改源长度），但没有错误。

// Correct
var Icon = function Icon() {
  var init = function init() {
    xhr.open('GET', 'img/iconset-[hash].svg', true);
    xhr.send();
  };

  init();
};
/* harmony default export */ __webpack_exports__["a"] = (Icon);

我在做什么错了？

Answer 1

我可以使用以下方法解决此问题：

let source = compilation.modules[i].source();

// instead of

let source = compilation.modules[i]._source._value;

获取/将经处理的源代码放回内部版本很简单：

let source = compilation.modules[i].source();

/// ... do things to source ... ///

compilation.modules[i].source = () => source;

这也适用于资产管理，但是您还需要更改大小道具：

let source = compilation.modules[i].source();

/// ... do things to source ... ///

compilation.assets[i] = {
  source: function () {
    return source;
  },
  size: function () {
    return source.length;
  }
};

模块源string.replace导致乱码

1 个答案: