未捕获的SyntaxError：无效或意外的令牌

Question

我正在尝试将我的项目升级到webpack版本2.

在我完成所有打字稿编译和webpack构建后，我尝试运行我的网站。我最终得到了这个错误：

  

未捕获的SyntaxError：无效或意外的令牌

这是在我的webpack bundle.js文件中。我去了文件，看看它是什么，并找到了这些字符：



光标位于ï和»之间。

这些字符是我下载的一些npm软件包的开头。 （我用yarn下载了它们。）

搜索bundle.js我可以看到这些字符在我的包中几次：

• jquery-color
的开头
• 在jquery-inputmask
的开头
• 在jquery-mask的开头（是的，我有两个面具..）
• 我不认识的另一个（关于getSignedRequest）。

这些奇怪的符号是如何到达那里的，以及如何摆脱它们？

Answer 1

我添加了webpack-utf8-bom插件，它为我照顾它。

这是插件的npm页面：https://www.npmjs.com/package/webpack-utf8-bom

这是该页面的用法：

// import plugin 
var BomPlugin = require('webpack-utf8-bom');

module.exports = {
  ...
  plugins: [
    // Add plugin in plugins list 
    // true for adding bom 
    // false for removing bom 
    new BomPlugin(true)
  ],

 ...
};

关键部分是它从我预期的方向向后工作。我原本认为false会消除BOM字符，但实际上使用true可以摆脱错误。

new BomPlugin(true)

当我看到这些字符被红点取代时。我的猜测是插件正确地格式化了它们，因此它们不会混淆浏览器。