javascript - webpack 4 - 模块解析失败:简单 JS 文件上的意外字符 '�' (1:0)
问题描述
所以做一些简单的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.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));返回 n},r.n=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){}]);
我现在有点难过,webpack 不应该需要一个用于常规 js 的特殊加载器,因为我理解它是如何工作的。
额外信息
节点 -v:10.4.1(使用 nvm 管理)
npm -v:6.1.0
webpack:^4.19.0
webpack-cli:^3.1.0
解决方案
错误似乎是评论中提到的字节顺序标记(bom)菲尔。当我尝试此修复时解决:https ://unix.stackexchange.com/questions/381230/how-can-i-remove-the-bom-from-a-utf-8-file on index.js 然后构建再次。
推荐阅读
- reactjs - React-Redux:提交表单时调用 2 个函数
- java - 具有 Cloud Run 和 Cloud Firestore 的 Spring Boot 应用程序
- python - 将php文件中的数据加载到python中
- kubernetes - fluent bit kubernetes注解不起作用
- angular - Angular - 如何从其他组件直接挂钩到组件的加载实例
- angular - 错误 NG8001:'ngx-masonry' 不是已知元素
- vue.js - 如果 value=null,Vue3js Cutom 输入组件消失
- reactjs - @react-google-maps/api 使用 window.google.maps 导致类型错误 - 如何正确调用谷歌地图 API?
- r - 它有一个 Plot Legend 命令来绘制星图吗?
- django - 在 django 中为同一个视图使用两个 url?