Webpack 打包时遇到 SyntaxError: Unexpected token 的解决方案-JavaScript中文网-JavaScript教程资源分享门户

Webpack 打包时遇到 SyntaxError: Unexpected token 的解决方案

Webpack 是现代前端开发中不可或缺的工具，它能够将散乱的代码文件打包成一个整洁、有序的文件，以方便开发和维护。但是在打包过程中，有时会出现 "SyntaxError: Unexpected token" 的报错信息，这通常表示你的代码存在语法错误或语法不兼容的情况，而导致 Webpack 打包失败。在本文中，我们将介绍三种常见的情况及其解决方案。

问题一：ES6 模块语法不支持

ES6 模块语法是一个常见的问题，因为 Webpack 打包的时候默认不支持 ES6 。要解决这个问题，需要安装 babel-loader 和其他一些相关的工具，如 babel-core、babel-preset-env 等。这些工具可以将 ES6 语法转换成 ES5 语法，以便 Webpack 能够正确地打包。

安装方式：

npm install babel-loader babel-core babel-preset-env --save-dev

配置方式：

// www.javascriptcn.com code example
var config = {
  entry: {
    app: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['env']
        }
      }
    ]
  }
}

这里的 test 指定了匹配规则，使用正则表达式匹配所有的 .js 文件。exclude 属性用于排除掉 node_modules 文件夹中的文件，因为这些文件都是第三方库，不需要转换。query 用于传递 babel 的参数，其中 presets 指定了要使用的插件，这里使用的是 babel-preset-env，可以将 ES6 语法转换成 ES5 语法。

问题二：JSON 文件格式错误

在使用 Webpack 打包时，你会遇到 JSON 文件格式错误的情况，其中 "Unexpected token" 可能是一个问号或一个换行符等，这意味着你的 JSON 文件格式不正确。一种解决方案是使用一个 JSON 格式验证工具，例如 JSONLint，它可以告诉你何处存在格式错误。此外，也可以手动检查文件的每一行，确保 JSON 格式正确。在你的 JSON 文件中删除任何非法字符或添加缺失的标点符号可以解决这个问题。

问题三：CSS 中使用了未支持的语法

Webpack 还会在打包时自动解析 CSS 文件，如果你的 CSS 文件中使用了不受支持的语法，则会出现报错信息 "SyntaxError: Unexpected token"。例如，使用 "@import" 语句或类似"color: red;border-color: #0033ff, #000001;" 这样的语句。要解决这个问题，可以使用 PostCSS 插件，并设置 autoprefixer。这个插件可以自动为你添加浏览器前缀，以确保你的 CSS 兼容性更好。安装方式：

npm install postcss-loader autoprefixer --save-dev

配置方式：

// www.javascriptcn.com code example
var config = {
  entry: {
    app: './src/index.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.css']
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: function () {
          return [autoprefixer];
        }
      }
    })
  ]
};

这里的 test 属性为匹配规则，使用正则表达式匹配所有的 .css 文件。use 属性指定了要使用的 Loader，因为我们需要使用 postcss，所以要将它的配置放在最后一位，以便让其他 Loader 先执行。另外需要注明的一点是，我们在 plugins 中使用 webpack.LoaderOptionsPlugin 加载 postcss 插件，并调用 autoprefixer 以添加浏览器前缀。

总之，在使用 Webpack 打包时，出现 "SyntaxError: Unexpected token" 的错误信息，有可能是上述原因之一所导致。你可以根据具体情况采取相应的解决方案，以确保你的代码能够正确地被打包。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bee5f30c976d473a33c5d1

Webpack 打包时遇到 SyntaxError: Unexpected token 的解决方案