webpack引入jquery插件

发表于   |   分类于   |  

今天我尝试使用webpack打包，来引入依赖于jquery的第三方插件。结果真是半天都没有成功，试了各种办法。 我就以简单的bootstrap和owl.carousel为例子，我在入口文件中写： 

import $ from "jquery";
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'owl.carousel';
import "bootstrap";

但是这样引入出现了jQuery和$.fn未定义的错误，试了很多种办法，最终功夫不负有心人，我找到了一种解决这种jquery模块依赖的解决办法，再配置文件中使用webpack自带的插件：

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]

这样我们就可以不用引入jquery，而让webpack自动的在需要的时候引入jquery了。

还有就是在引入bootstrap.css的时候，由于会引入字体和图表文件，会出现错误，所以需要在配置文件中的module.loaders中加上：

{
    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
    loader: "file"
}, {
    test: /\.(woff|woff2)$/,
    loader: "url?prefix=font/&limit=5000"
}, {
    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
    loader: "url?limit=10000&mimetype=image/svg+xml"
}

这样就可以不报错的引入bootstrap.css文件了。