在使用 Webpack 进行打包应用程序的过程中，经常会遇到“Unexpected token” 错误。这个错误的出现是因为 JavaScript 原始代码在经过 Webpack 打包后，部分语句会转换成新的语法，进而导致代码出现错误。本篇文章将会指导您如何解决这个问题。
错误分析
在解决问题之前，我们需要了解一些出现问题的背景。通常在 Webpack 进行打包的过程中，我们会使用 Babel 进行代码转换。这是因为一些新的 ECMAScript 语法并没有在所有浏览器上得到支持，通过 Babel 可以将这些语法转换成浏览器可执行的代码。然而，在 Babel 转换的过程中，如果我们忘记了配置 Babel 或者配置有误，那么就很容易出现 “Unexpected token” 错误。该错误通常会在编译过程中出现，而不是在浏览器运行时出现。
解决方法
配置 .babelrc 文件
在解决这个错误之前，我们需要确认一下 .babelrc 文件是否正确配置。这个配置文件在我们使用 Babel 进行代码转换时必不可少。
在 .babelrc 文件中，我们需要设置 presets 和 plugins 等选项，以确保 Babel 处理我们的 ECMAScript 代码时不会出现问题。
例如我们使用了一些新的 ECMAScript 语法，但是在 .babelrc 中没有手动配置时，就会遇到该错误。例如这个例子，我们使用了箭头函数：
const sum = (a, b) => a + b;
在没有配置 .babelrc 的情况下，Webpack 将会编译成下面的代码：
const sum = function(a, b) { return a + b; };这个时候就有可能出现 “Unexpected token” 的错误，因为浏览器无法识别箭头函数的语法。
为了解决这个问题，在 .babelrc 文件中我们需要配置 transform-arrow-functions 插件，这样 Babel 就会正确地将箭头函数转换成浏览器可执行的代码。如下所示：
{
"presets": [
"@babel/preset-env"
],
"plugins": [
"@babel/plugin-transform-arrow-functions"
]
}通过设置 .babelrc 文件中的相关配置，可以确保 Babel 在进行代码转换时能够正确的识别新的 ECMAScript 语法。
确认依赖库版本
通常情况下，“Unexpected token” 错误还可能是因为依赖库版本的问题导致的。我们需要确保我们所使用的依赖库与 Babel 和 Webpack 兼容。对于 Babel 和 Webpack，我们通常可以通过在 package.json 文件中添加预定义的版本格式来确保版本之间的兼容性。例如：
{
"dependencies": {
"babel-core": "6.26.3",
"babel-loader": "8.0.6",
"babel-preset-env": "1.6.1",
"webpack": "4.44.1"
}
}在这个例子中，我们会发现，我们使用的 Babel 版本是 6.26.3，which is the babel-core package, and the babel-loader package is a version 8.0.6.此外，我们还定义了我们的依赖项 webpack 的版本为 4.44.1。这样一来，我们可以确保我们所使用的依赖库都是兼容的，并避免了一些潜在的问题。
总结
“Unexpected token” 错误是一个很常见的错误，也是一个很难解决的错误。然而，在正确配置 .babelrc 文件和确认依赖库版本的情况下，这个问题就可以很容易解决。最后，在代码运行之前，我们可以使用 Webpack 的预编译检查功能来检查代码中是否存在这种类型的语法错误。
本篇文章指导了如何解决 Webpack 打包出现 “Unexpected token” 错误，它有一个简单的解决方案，需要正确地配置 Babel 和确认依赖库版本，这样我们就可以在 JavaScript 应用程序中使用新的 ECMAScript 语法了。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a770b8add4f0e0ff0870e9