我尝试用webpack版本2.6.1加载slick plugin,到目前为止没有成功。
我需要将jquery作为全局变量加载到2.2.4版本(因为我还有其他旧插件要管理),所以我在webpack.config.js文件中设置了 ProvidePlugin:
const webpack = require('webpack');
const nodeEnv = process.env.NODE_ENV || 'production';
module.exports = {
devtool: 'source-map',
entry: { filename: './src/js/main.js' },
output: { filename: './dist/js/bundle.js' },
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(nodeEnv) }
})
]
};
我的main.js文件如下所示:
import 'slick-carousel';
console.log('jquery version: ', $.fn.jquery);
console.log($.fn.slick);
bundle.js文件由webpack生成,日志如下:
Version: webpack 2.6.1
Time: 1490ms
Asset Size Chunks Chunk Names
./dist/js/bundle.js 616 kB 0 [emitted] [big] filename
./dist/js/bundle.js.map 794 kB 0 [emitted] filename
[0] ./~/jquery/dist/jquery.js 258 kB {0} [built]
[1] ./~/slick-carousel/slick/slick.js 84.3 kB {0} [built]
[2] ./src/js/main.js 1.52 kB {0} [built]
[3] ./~/slick-carousel/~/jquery/dist/jquery.js 268 kB {0} [built]
jQuery加载两次:第一个在全局环境中,版本2.2.4,第二个是版本3.2.1(对我来说太新了,我不想要),我猜是由slick作为依赖项包含在内的。
加载到一个html页面,我在浏览器开发工具中得到以下日志:
jquery version: 2.2.4
undefined
因此,jquery被正确加载,而slick没有。
我错过了什么?
谢谢
3条答案
按热度按时间2lpgd9681#
我找到了适合我的解决方案:
1.添加到
js
文件:1.添加到
scss
文件:gab6jxml2#
问题出在我的package.json:我在dependencies属性中使用了 slick-carousel,而在devDependencies中使用了 jquery。
将 jquery 移到依赖项中解决了我的问题。
eblbsuwk3#
使用webpack 5.74我添加了一个新的规则,这样安装npm后安装暴露加载程序
它就像一个符咒。