版权声明:本博客主要记录学习笔记和遇到的一些问题解决方案,转载请注明出处! 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'
})
]