webpack 4 - 模块解析失败：简单 JS 文件上的意外字符 '�' (1:0)

Posted 2023-03-13

【中文标题】webpack 4 - 模块解析失败：简单 JS 文件上的意外字符 \'�\' (1:0)

【英文标题】：webpack 4 - Module parse failed: Unexpected character '�' (1:0) on simple JS filewebpack 4 - 模块解析失败：简单 JS 文件上的意外字符 '�' (1:0)

【发布时间】：2019-02-20 10:23:36

【问题描述】：

所以做一些简单的 webpack 学习。跟随本教程：https://www.valentinog.com/blog/webpack-tutorial/

目前只是尝试通过运行 npm run build 将 .src/index.js 构建到 ./dist/main.js

./src 文件夹中除了 index.js 之外没有其他内容，而 ./src/index.js 的全部内容是

window.console.log('hello world');

我在控制台中收到此错误。

Hash: 61965fd874c7fad84f98
Version: webpack 4.19.0
Time: 76ms
Built at: 09/16/2018 4:37:31 PM
 1 asset
Entrypoint main = main.js
[0] ./src/index.js 177 bytes 0 [built] [failed] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production'         
for this value. Set 'mode' option to 'development' or 'production' to enable     
defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: 
https://webpack.js.org/concepts/mode/

ERROR in ./src/index.js 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

这不会构建捆绑包。

但是，当 ./src/index.js 的内容是空的并且完全为空时，它可以正常构建。

上述条件下构建时main.js的内容：

!function(e)var t=;function r(n)if(t[n])return t[n].exports;var o=t[n]=i:n,l :!1,exports:;return e[n].call(o.exports,o,o.exports,r),ol=!0,o.exportsrm=e,rc=t,rd= function(e,t,n)ro(e,t)||Object.defineProperty(e,t,enumerable:!0,get:n),rr=function(e)"undefined"!= typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,value:"Module"),Object.defineProperty(e,"__esModule",value:!0),rt=function(e,t) if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(rr(n), Object.defineProperty(n,"default",enumerable:!0,value:e),2&t&&"string"!=typeof e)for(var o in e)rd(n,o,function(t)return e[t].bind(null,o));return n,rn=function(e)var t=e&&e.__esModule?function()return e.default:function()return e; return rd(t,"a",t),t,ro=function(e,t)return Object.prototype.hasOwnProperty.call(e,t),rp="",r(rs=0) ([函数(e,t)]);

我现在有点难过，webpack 不应该需要一个用于常规 js 的特殊加载器，因为我理解它是如何工作的。

额外信息 节点 -v：10.4.1（使用 nvm 管理） npm -v: 6.1.0 网络包：^4.19.0 webpack-cli: ^3.1.0

【问题讨论】：

显示main.js的内容。

编辑主帖，在 index.js 为空时编译时包含 main.js 的内容

在位置1:0，它可能是一个字节顺序标记。 Google “如何在 中删除 bom”

编译前需要main.js的内容。

main.js 在编译之前不存在。如果文件不存在，Webpack 4 会自动为您创建文件。出现错误时不会创建它，它只是在编译时index.js 为空时创建并且内容是粘贴在帖子中的内容。

【参考方案1】：

错误似乎是 cmets 中提到的字节顺序标记 (bom) Phil。当我尝试此修复时解决了：https://unix.stackexchange.com/questions/381230/how-can-i-remove-the-bom-from-a-utf-8-file 在 index.js 上然后再次构建。