我是 webpack 的新手,我正在尝试使用webpack和two.js编写一个Web应用程序。为了完整起见,这些是我的依赖:
"devDependencies": {
"jasmine-core": "^2.8.0",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-jasmine": "^1.1.0",
"karma-webpack": "^2.0.4",
"webpack": "^3.5.5"
},
"dependencies": {
"two.js": "^0.6.0"
}
我有以下webpack.config.js
:
const path = require('path');
module.exports = {
entry: './myentry.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'out')
}
};
文件myentry.js
只需导入 two.js :
import two from "two.js";
Library two.js 是我的npm依赖项的一部分,因此可以在node_modules
文件夹中的本地节点模块中找到它。当我继续创建捆绑包时:
webpack --config webpack.config.js
成功,我得到以下输出:
Hash: 5e762def59fa65ff8487
Version: webpack 3.5.5
Time: 468ms
Asset Size Chunks Chunk Names
bundle.js 258 kB 0 [emitted] [big] main
[0] ./myentry.js 271 bytes {0} [built]
+ 1 hidden module
生成的捆绑包可用here。
所以我在HTML页面中使用了这个包:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My stuff</title>
<script type="application/javascript" src="./out/bundle.js"></script>
</head>
<body></body>
</html>
当我在Chrome中打开页面时(我使用http-server来避免与CORS相关的问题),我在F12工具中遇到了这些错误:
Uncaught TypeError: Cannot read property 'isFunction' of undefined
at bundle.js:1917
at Object.<anonymous> (bundle.js:3867)
at __webpack_require__ (bundle.js:20)
at Object.root (bundle.js:72)
at __webpack_require__ (bundle.js:20)
at Object.defineProperty.value (bundle.js:63)
at bundle.js:66
如果您检查捆绑包,则会在此行中看到错误:
hasEventListeners: _.isFunction(root.addEventListener),
所以下划线未定义,但它在 two.js 中提供!为什么 webpack 会出现问题?