共计 1867 个字符，预计需要花费 5 分钟才能阅读完成。
学习 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-loader
yarn 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，引入 jquery
import $ from ‘jquery’;
console.log($)
step3: 配置 webpack.config.js 文件
module.exports = {
//…
// 外部引入的，不要打包
externals: {
jquery: “$”
}
//…
}
这种方法中 webpack.config.js 中的 externals 的配置是告诉 webpack，这个模块是第三方模块，不要打包进去，这样可以避免因打包进去而文件过大，造成资源浪费。同样，这种方法也是可以暴露给 window 的。
