问题描述
在使用 Webpack 构建 React 项目时，有时会遇到 “Syntax Error: Unexpected token” 错误。这个错误通常会在编译过程中出现，导致项目无法正常运行。
问题原因
这个错误通常是由于使用了 ES6 的语法，但是 Webpack 默认只支持 ES5 的语法。因此，当 Webpack 遇到 ES6 的语法时，就会报错。
解决方案
1. 使用 Babel 转义
Babel 是一个 JavaScript 编译器，可以将 ES6 的语法转换成 ES5 的语法。因此，我们可以使用 Babel 转义，使得 Webpack 可以支持 ES6 的语法。
在项目中安装 Babel：
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在 Webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ------- --------
-
-
-
-
-这样，Webpack 就可以支持 ES6 的语法了。
2. 使用 .babelrc 文件
我们也可以使用 .babelrc 文件来配置 Babel。
在项目根目录下创建 .babelrc 文件，添加以下代码：
{
"presets": ["env", "react"]
}在 Webpack 的配置文件中，我们只需要添加以下代码：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- --------------
-
-
-
-这样，Webpack 会自动查找 .babelrc 文件，并按照配置进行转义。
3. 使用 Webpack 的 resolve.extensions
我们也可以通过配置 Webpack 的 resolve.extensions 来解决这个问题。
在 Webpack 的配置文件中添加以下代码：
resolve: {
extensions: ['.js', '.jsx']
}这样，Webpack 就会在查找文件时，自动添加 .js 和 .jsx 后缀名。这样就可以支持 ES6 的语法了。
总结
在使用 Webpack 构建 React 项目时，遇到 “Syntax Error: Unexpected token” 错误，通常是由于使用了 ES6 的语法，但是 Webpack 默认只支持 ES5 的语法。我们可以通过使用 Babel 转义、使用 .babelrc 文件或者使用 Webpack 的 resolve.extensions 来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6682035cdc1ed1a61b27a2a3