webpack(11)_引入jQuery等第三方js库

版权声明：本博客主要记录学习笔记和遇到的一些问题解决方案，转载请注明出处！ https://blog.csdn.net/u010982507/article/details/82811094

场景描述：项目中需要使用一种通用库(如jQuery)，在各个模块都需要用到，且不是每次都要引入，就需要webpack来处理一下。本章主要记录在webpack中加载和使用以jQuery为例的第三方js库。主要有以下三种方式：

• 在index.html中直接引入js库
• 安装node_modules依赖包
• 将js库保存在本地目录中

在index.html中直接引入js库

1、通过script标签引入

<script src="src/js/jquery-3.3.1.min.js"></script>

2、通过CDN服务引入

安装node_modules依赖包

一、通过ProvidePlugin引入jQuery
1、先安装jQuery依赖
`npm install jquery --save-dev
2、在webpack.config.js中配置

  plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'
        })
    ]

3、示例
添加以上配置后就可以在js中使用juqery了

$("div").addClass("container");

测试后在html中就会生效。

二、通过ProvidePlugin引入jQuery

• 引入imports-loader
npm install imports-loader --save-dev
• 在webpack.config.js中配置

 {
          test: path.resolve(__dirname, 'src/app.js'), // 指定使用的模块
          use: [
              {
                  loader: "imports-loader", // 使用imports-loader
                  options: {
                      $: 'jquery' // 使用$去解析jquery
                  }
              }
          ]
      }

将js库保存在本地目录中

如果将js库保存在本地目录中，如下图所示:

此时没有安装jQuery的node_modules依赖，而我们需要从本地引入，在webpack.config.js中配置
jquery$表示精准定位到某个文件，而不是文件夹。

// 引入依赖
var path = require('path');
var PostCss_Sprites = require('postcss-sprites');
let webpack = require('webpack');
 resolve: {
        alias: {
            jquery$: path.resolve(__dirname, 'src/js/jquery-3.3.1.min.js')
        }
    }
   plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery'
        })
    ]

使用imports-loader来引入jQuery