Webpack 打包报错处理-JavaScript中文网-JavaScript教程资源分享门户

前言

Webpack 是现代前端开发必备的工具之一，它可以将多个 JavaScript 文件和其他资源（如 CSS、图片等）打包成一个或多个 Bundle。但在项目中，Webpack 打包报错是常有的事情。在这篇文章中，我们将介绍如何处理常见的 Webpack 打包报错。

常见的 Webpack 打包报错

SyntaxError

当出现 SyntaxError 时，webpack 需要你检查你的代码是否符合 ECMAScript 标准。通常，这个错误是由于以下的一些情况造成的：

代码行末尾可能还有其他字符
找不到预期中的字符
必需的分号漏掉了
书写错误的代码

function test () {
  console.log('hello, world!')
}

假设你在上述代码中增加一个多余的括号：

function test () {
  console.log('hello, world!')
}});

Webpack 将会报错：

ERROR in ./test.js
Module build failed: SyntaxError: Unexpected token }

ModuleNotFoundError

当出现 ModuleNotFoundError 时， webpack 无法找到你想要打包的模块。这个错误通常是由于以下一些原因引起的：

模块名称拼写错误
模块路径错误
模块未安装或未正确安装或未在 package.json 中声明

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App1';

假设你在 import 语句中使用错误的模块名称，Webpack 将报错：

ERROR in ./src/index.js
Module not found: Error: Can't resolve './App1' in 'D:\Workspaces\front-end-webpack'

ModuleParseError

当出现 ModuleParseError 时，这意味着从模块导入的表达式或语句无法被解析或解释为有效语法。通常，这意味着导入语句被解释为错误的 JavaScript 表达式。

import { foo } from './module';

console.log(foo);

假设你的 ./module 中定义的导出变量名是 bar，Webpack 将报错：

ERROR in ./src/index.js
Module parse failed: Unexpected token (3:9)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
See https://webpack.js.org/concepts#loaders

NoEmojiError

虽然不是严格的 Webpack 报错，但是当你在 JavaScript 中使用 Emoji 符号时，ESLint 将会报错。ESLint 是用来检查代码是否符合规范的工具。

const hello = '👋';
console.log(hello);

当你运行 eslint 时，将会看到 NoEmojiError：

✖ 4:12  error  Unexpected emoji: 👋  no-emoji

解决 Webpack 打包报错

方案一：检查代码

每次出现错误时，你应该先检查你的代码。你可以在你的编辑器或 IDE 中使用 Linter 工具或 ESLint 插件来实现代码检查。

对于上述的代码：

function test () {
  console.log('hello, world!')
}});

在大多数情况下，你将能够通过删除多余的括号来解决 SyntaxError：

function test () {
  console.log('hello, world!')
}

方案二：检查模块名称和路径

对于以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App1';

你可以检查 ./App1 的文件路径和文件名是否拼写正确。如果打错了文件名或者路径，你可以修改为正确的名称或路径：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

方案三：检查依赖

对于以下代码：

import { foo } from './module';

console.log(foo);

你可以检查 ./module 是否正确安装并且在 package.json 中声明：

import { bar } from './module';

console.log(bar);

方案四：使用 Loader 处理语法错误

在某些情况下，语法错误可能会被 Webpack 视为无法处理的错误，这时我们只能使用 loader 处理语法错误。

举个例子，可能你希望在你的项目中使用 Emoji 符号，你可以使用 diff-big.js loader，将 Emoji 解析为 Unicode 序列：

-- -------------------- ---- -------
-- -----------------
-------------- - -
  ------- -
    ------ -
      -
        ----- --------
        ------- -------------
      -
    -
  -
-

在你的 JavaScript 文件中，你可以使用 Emoji：

const hello = '👋';
console.log(hello);

总结

在本文中，我们讨论了 Webpack 打包错误的一些常见类型，以及解决这些错误的通用方案。借助这些方法，我们可以更快的解决错误，并运行我们的 Webpack 项目。

在你的开发和生产环境中，出现错误是常态，它是你走向成功的成长历程的一部分。希望这篇文章能够帮助你快速解决 Webpack 打包错误并继续成长。

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