脚本宝典收集整理的这篇文章主要介绍了学习webpack4 - 第三方库的使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方模块的使用
学习webpack4 - 抽离公共代码
...持续中
=======================================================
第三方库的使用
注意:开始之前以下内容之前,需要配置一些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的。
补充:noParse
当我们在import/require模块的时候,webpack会去解析这个模块是否还导入了其他依赖,但是有些库是没有其他依赖的,比如jquery, 这时候如果再去解析它是否有其他依赖就会很浪费性能,noParse的作用就是告诉webpack不用去解析某些模块中的依赖,这样会提升webpack打包速度。
module.exports = {
//...
//不去解析这些模块中的依赖关系
noParse: /jquery/
//...
}
以上是脚本宝典为你收集整理的学习webpack4 - 第三方库的使用全部内容,希望文章能够帮你解决学习webpack4 - 第三方库的使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。