Webpack 编译时报错：“Module parse failed: Unexpected character '↵'”
在前端开发中，Webpack 是一个非常常见的工具，它可以帮助我们打包、优化代码。但是在使用过程中，我们可能会遇到一些问题。其中，一个常见的问题是：“Module parse failed: Unexpected character '↵'”。这个错误信息可能会让我们感到很困惑，本文将详细介绍这个错误的原因和解决方法。
- 错误原因
在使用 Webpack 进行编译时，如果遇到了“Module parse failed: Unexpected character '↵'”这个错误，通常是因为代码中存在不符合规范的字符。在这个错误信息中，“↵”表示换行符，也就是说，代码中存在了不符合规范的换行符。这可能是因为我们在编辑代码时，使用了不同的编辑器或操作系统，导致换行符的格式不一致。
- 解决方法
2.1. 修改编辑器设置
我们可以通过修改编辑器的设置，来统一换行符的格式。具体方法如下：
在 Visual Studio Code 中，可以按下 Ctrl + Shift + P，然后输入“Change End of Line Sequence”，选择“LF”或“CRLF”即可。
在 Sublime Text 中，可以按下 Ctrl + Shift + P，然后输入“Line Endings”，选择“Unix”或“Windows”即可。
在 Atom 中，可以按下 Ctrl + Shift + P，然后输入“Line Endings”, 选择“LF”或“CRLF”即可。
2.2. 使用 Webpack 的 loader
如果我们无法修改编辑器的设置，或者代码中已经存在了不符合规范的换行符，我们可以使用 Webpack 的 loader 来解决这个问题。具体方法如下：
在 webpack.config.js 中，配置如下的 loader：
------- -
------ -
-
----- --------
------- ---------------
-------- -
-------- ---------------------
--
-------- ------
-------- --------------
--
-
----- --------
------- ----------------
-------- -
---- ----
--
-------- ------
-------- --------------
-
-
-这个 loader 的作用是先使用 babel-loader 进行编译，然后再使用 eslint-loader 进行代码检查。在 eslint-loader 的 options 中，我们设置了 fix: true，这表示 eslint-loader 会自动修复不符合规范的代码。
- 总结
在使用 Webpack 进行编译时，遇到“Module parse failed: Unexpected character '↵'”这个错误，通常是因为代码中存在不符合规范的字符。我们可以通过修改编辑器的设置，来统一换行符的格式；也可以使用 Webpack 的 loader 来解决这个问题。在实际开发中，我们应该注意代码的规范性，避免出现这样的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f38fd62b3ccec22fc05250