学习webpack4.x - 基础配置学习webpack4.x - HTML处理学习webpack4.x - 样式处理学习webpack4.x - ES6语法转化学习webpack4.x - 第三方模块的使用 // 学习webpack4.x - 图片处理（未整理）…持续中=======================================================第三方库的使用注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门：学习webpack4.x - 基础配置当前目录：在项目中，经常会引用一些第三方模块， 比如jquery, lodash等，但是这些第三方模块怎么在webpack中配置呢？以jquery为例子：首先先安装jquery：yarn add jquery方法一：直接引用打开src/index.js文件，输入：import $ from ‘jquery’;console.log($);尝试运行：npm run dev， 结果如下：结果中会发现，已经引入完成了，在当前这个文件中可以随便使用jquery了。但是这种方法是不能将jquery暴露到window全局的, 执行console.log(window.$)，结果是undefined，那么怎么暴露到window呢？如下：方法二：暴露到window将第三方库暴露在全局可以用expose-loader, 下面通过这个将jquery变成 $ 暴露到window:step1：配置webpack.config.js文件：// 模块配置module.exports = { module: { //… rules: [ //… { test: require.resolve(‘jquery’), use: ’expose-loader?$’ //把jquery变成 $ 暴露到window } ] }}step2: 安装expose-loaderyarn add expose-loader -D尝试运行：npm run dev, 这时候发现console.log(window.$)有值了！以上两种做法很麻烦，要import $ from ‘jquery’这样引入jquery, 那么怎么样能在不同模块直接使用 $ 而不引入jquery呢 ？ 如下：方法三：模块中注入配置webpack.config.js文件：let Webpack = require(‘webpack’);// 模块配置module.exports = { //… //插件配置 plugins: [ //… // 注入对象 new Webpack.ProvidePlugin({ ‘$’: ‘jquery’ //把jquery变成 $ 注入到模块 }) ]}只需要在webpack.config.js中这样配置下插件， 就可以直接在需要用到jquery的模块中使用$了， 而不用再通过import引入jquery，但是这种方法不能暴露到window中哦。方法四：html中直接引入这种方法是通过html的script标签，直接把第三方库引入进来，不需要yarn add去安装它，方法如下：step1: 打开src/index.html文件：<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>丸子</title> <script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></head><body> <div>我通过script引入了一个jquery</div></body></html>step2: 打开src/index.js，引入jqueryimport $ from ‘jquery’;console.log($)step3: 配置webpack.config.js文件module.exports = { //… //外部引入的，不要打包 externals: { jquery: “$” } //…}这种方法中webpack.config.js中的externals的配置是告诉webpack，这个模块是第三方模块，不要打包进去，这样可以避免因打包进去而文件过大，造成资源浪费。同样，这种方法也是可以暴露给window的。