我的模块之一是外部插件(WOW效果),它需要在index.html中初始化才能正常工作,使用:
<script>
new WOW().init();
</script>
如果我将插件作为一个完全外部的文件使用,它就可以工作了。但当我用webpack编译它时,它会给我一个错误:
未捕获的ReferenceError:未定义wow。
我的配置文件如下:
module.exports = {
entry: './modules/_entry.js',
output: {
filename: 'bundle.js'
}
};
entry.js包含:
require("./wow.js");
我做错了什么?
有两种可能性:
-
Externals此脚本的好处是,您可以轻松地将本地脚本文件交换为CDN文件在这种方法中,脚本的源是一个外部供应商文件
- 有一个文件夹,你的供应商脚本,如WOW
- 使用
<script src="vendors/WOW.js">
在HTML文件中链接到它 - 您可以在另一个
<script>
标记内进行如上所述的初始化 - 将外部配置添加到您的webpack配置中:
var config = {
entry: [...],
output: {...},
externals: {
Wow: 'WOW'
},
module: {...},
plugins: [...]
};
- 从现在起,您可以访问所有应用程序模块中的人工模块
Wow
,也可以访问它们的import
或require
(尽管在WOW的情况下,我认为您不需要它)
-
Expose-loader通过这种方式,您可以移动到通常用作…嗯,modules:)的全局作用域模块在这种方法中,脚本的源是一个模块(您自己的模块或与npm一起安装的模块)
- 安装插件:
npm install expose-loader --save-dev
- 将公开加载程序配置添加到您的webpack配置文件中:
- 安装插件:
var config = {
entry: [...],
output: {...},
module: {
loaders: [{
...
}, {
test: 'path/to/your/module/wow.min.js',
loader: "expose?WOW"
}]
},
plugins: [...]
};
- 这将使
WOW
成为一个全局变量,可在<script>
标记中使用