简体   繁体   English

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

[英]webpack 4 - Module parse failed: Unexpected character '�' (1:0) on simple JS file

So doing some simple webpack learning. 因此,进行一些简单的Webpack学习。 Following this tutorial: https://www.valentinog.com/blog/webpack-tutorial/ 遵循本教程: https : //www.valentinog.com/blog/webpack-tutorial/

Currently just trying to get .src/index.js to build to ./dist/main.js by running npm run build 当前只是通过运行npm run build尝试使.src / index.js生成到./dist/main.js

There is nothing else in the ./src folder besides index.js and the entire contents of ./src/index.js is 除了index.js外,。/ src文件夹中没有其他内容,。/ src / index.js的全部内容为

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

And I get this error in the console. 我在控制台中收到此错误。

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)

This will not build the bundle. 这不会建立捆绑包。

However when the contents of ./src/index.js is nothing and it's completely empty it builds fine . 但是,当./src/index.js的内容为空并且完全为空时,它可以正常运行

The contents of main.js when it builds under the above condition: 在上述条件下构建时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.exports}rm=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)}([function(e,t){}]); !function(e){var t = {}; function r(n){if(t [n])返回t [n] .exports; var o = t [n] = {i:n,l:!1 ,exports:{}};返回e [n] .call(o.exports,o,o.exports,r),ol =!0,o.exports} rm = e,rc = t,rd = function(e ,t,n){ro(e,t)|| Object.defineProperty(e,t,{enumerable:!0,get:n})}},rr = function(e){“ undefined”!= Symbol && Symbol的类型。 toStringTag && Object.defineProperty(E,Symbol.toStringTag,{值: “模块”}),Object.defineProperty(E, “__ esModule”,{值:0})},RT =函数(E,T){如果(1&T && (e = r(e)),8&t)返回e; if(4&t &&“ object” == e && e && e .__ esModule的类型)return e; var n = Object.create(null); if(rr(n),Object.defineProperty (n,“默认”,{可枚举:!0,值:e}),2&t &&“字符串”!= e的类型)for(e中的var o)rd(n,o,function(t){返回e [t ]}。bind(null,o));返回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){返回Object.prototype.hasOwnProperty.call(e,t)},rp =“”,r(rs = 0)}([功能(E,T){}]);

I am sorta stumped right now, webpack shouldn't need a special loader for regular js was my understanding of how it worked. 我现在有点迷惑,对于常规js,webpack不需要特殊的加载器,这是我对其工作原理的理解。

Extra info 额外信息
node -v: 10.4.1 (managed with nvm) 节点-v:10.4.1(由nvm管理)
npm -v: 6.1.0 npm -v:6.1.0
webpack: ^4.19.0 网路包装:^ 4.19.0
webpack-cli: ^3.1.0 webpack-cli:^ 3.1.0

Error seems to be the byte-order-mark (bom) Phil mentioned in the comments. 错误似乎是注释中提到的字节顺序标记(bom)Phil。 Solved when I tried this fix: https://unix.stackexchange.com/questions/381230/how-can-i-remove-the-bom-from-a-utf-8-file on the index.js and then built again. 我尝试此修复程序时已解决:在index.js上https://unix.stackexchange.com/questions/381230/how-can-i-remove-the-bom-from-a-utf-8-file然后进行了构建再次。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM