場景描述：專案中需要使用一種通用庫(如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