webpack中引入jQuery

通常在用webpack打包的项目中，引入jQuery库，最简单的方法就是在对应的模块中写入下面的代码：

import $ from 'jquery'

这样做的弊端是，张三模块需要用到了，就引一次；李四模块需要用到了，还需要再引一次；到王五模块那儿呢，要用你还得再来一遍。不停地复制、粘贴，这是一种重复工作，是劳动密集型的活儿。

我们要想办法自动化，做知识密集型的事儿，少干劳动密集型的活儿。

解决的方案是：在配置文件webpack.config.js中，引入jQuery，这样其他模块就都不用再重复引用了，代码如下：

const webpack = require('webpack');  // 使用webpack自带的插件

......

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',          // 给各模块用的
    jQuery:"jquery"      // 给bootstrap用的
  }),

......

]

......

这样就完事儿了。

额外说明一下：

在进行引用时，一般配置上

$: 'jquery'

这一个就够用了，如果你的项目中还使用了bootstrap，要使用它的脚本bootstrap.min.js，那么就必须得配置上

jQuery:"jquery"

注意区分大小写啊，否则，当你引入

import 'bootstrap/dist/js/bootstrap.min';

脚本就会报错Bootstrap's JavaScript requires jQuery，切记。