在使用 Webpack 构建前端项目时，我们常常会使用 Babel 来将 ES6+ 的语法转化成可在当前浏览器环境下运行的 ES5 代码。这样我们就可以在项目中方便地使用最新的 JavaScript 语言特性。
然而，有时候我们在编写 Webpack 配置文件时，可能会遇到以下错误提示：
Module build failed (from ../node_modules/babel-loader/lib/index.js): SyntaxError: Unexpected token
这是什么原因呢？怎样来解决这个问题呢？
原因解析
这个错误提示告诉我们，Babel 编译遇到了一个意外的标记(Unexpected token)。也就是说，Babel无法处理这一段代码。
具体来说，当 Babel 编译 webpack 配置文件时，我们所使用的 Babel preset 可能会缺少一些必要的插件，导致在处理配置文件时出现了某些无法处理的语法。
举个例子，在使用了最新版的babel/preset-env时，如果我们在 Webpack 配置文件中使用了最新的对象解构语法，却没有配合babel插件babel/plugin-proposal-object-rest-spread，就可能会出现该错误：
const { DefinePlugin } = require('webpack');解决方案
解决该问题有以下几种方法：
方法一：添加 Babel 插件
我们需要在我们的 Babel preset 中添加一些必要的插件，以便正确地处理配置文件中使用的语法。比如，以上面的代码片段为例，我们需要添加 babel-plugin-transform-object-rest-spread 插件：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- - ----------- --- -- --- --
-------------- --------
--------- -
--
--
---------- -
-------------------------------------------
-
-方法二：使用 require 替代 import
上面的问题是因为使用了最新的 ES6 对象解构语法，需要使用到 @babel/plugin-proposal-object-rest-spread 插件，以转换该语法。但实际上，在 Webpack 配置文件中，我们可以使用 require 语句来代替 import 语句。
const webpack = require('webpack')这样，我们就可以解决这个错误了，而不需要添加额外的插件。
方法三：使用 Node.js 的 require 代替解构
如果你不想使用 Babel 编译你的 Webpack 配置文件，你也可以避免这个问题。因为 Node.js 环境已经支持了大多数 ES6 语法。
所以，可以通过使用 require 语句来代替解构语法，例如：
const { DefinePlugin } = require('webpack');可以改写为：
const webpack = require('webpack');
const DefinePlugin = webpack.DefinePlugin;这样，在 Node.js 环境下就可以正常运行了。
总结
Webpack 配置文件中的语法与前端代码有些许不同，因此需要针对性地配置 Babel。在遇到这种问题时，我们可以根据具体情况，选择添加 Babel 插件、使用 require 代替解构，或者使用 Node.js 的 require 来解决问题。希望这篇文章能够帮助你更好地理解和使用 Webpack 以及 Babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e59928f6b2d6eab3109a27