我尝试使用react和webpack来实现wow.js。
我通过npm安装它。npm install --save wow.js
它安装完美。现在的问题是如何正确导入它。我无法使其工作保持不确定状态。
我尝试了几种方法:
第一的:
import wow from 'wow.js';
但是webpack无法编译它。它说找不到模块。即使我使用完整的URL
import wow from /node_modules/wow.js
第二:
我正在使用here的解决方案:
require('imports?this=>window!js/wow.js');
但是我仍然找不到模块(我将路径更改为node_modules)。
第三:
从here:
我正在使用暴露模块,并尝试
new WOW().init();
它说Wow is undefined
。我没有使用他的第一个解决方案,因为我希望我的html看起来很简单,只有
bundle.js
脚本。我找不到其他解决方案。我应该怎么做才能使其正常工作?
谢谢!
我的webpack.config.js:
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'bootstrap-loader',
'webpack/hot/only-dev-server',
'./src/js/index.js'
],
output: {
path: __dirname + "/build",
publicPath: "/build/",
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
],
module: {
loaders: [
{
exclude: /node_modules/,
loader: 'react-hot!babel'
},
{
test: /\.css$/,
loader: 'style!css!postcss'
},
{
test: /\.scss$/,
loader: 'style!css!postcss!sass'
},
{ test: /\.(woff2?|ttf|eot|svg|otf)$/, loader: 'url?limit=10000' },
{
test: 'path/to/your/module/wow.min.js',
loader: "expose?WOW"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
postcss: [autoprefixer]
};
最佳答案
执行以下步骤
exports-loader
npm i exports-loader --save-dev
webpack.config.js
此装载程序{
test: require.resolve('wow.js/dist/wow.js'),
loader: 'exports?this.WOW'
}
import
添加到您的应用import WOW from 'wow.js/dist/wow.js';
关于javascript - Wow.js与webpack和 react ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35099440/