当webpack使用第三方库的时候
可以使用 webpack.providePlugin插件
有三种方式
1. 直接在html文件中引入 cdn上的文件 (注意这种方式是引用网络上的 CDN 文件)
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>.js
在html文件中引入了之后,就可以在入口文件(app.js)中,使用 $(function(){}) 了
2. 使用 npm 安装上jquery,然后 使用 webpakc.providePlugin插件
方法如下
npm install jquery --save; (这里的jquery是要在项目中运行的,所以要用 --save 而不能用 --save-dev)
安装了 jquery后,webpack.config.js配置如下
path
module.exports = {
entry:{
app:"./src/app.js",
},
output:{
path:path.resolve(__dirname,"dist"),
filename:"[name].bundle.[hash:5].js"
},
module:{
rules:[
{
test:...
use:[
{
loader:......
options:{
.......
}
}
]
}
]
},
plugins:[
new webpack.ProvidePlugin({
$:"jquery", //这里的意思是就把 $ 注入模块中 , 而后面的jquery 就是 npm 命令行中的 jquery模块
})
]
}
配置好后,就可以在 项目中使用 $(function(){})了
3.当第三方库是自已开发的,不在 CDN上,也没有npm可以用来安装的时候,就没有办法用以上两种情况来加载了
这时就要使用 webpack.config.js 的 resolve配置了,还以 jquery 为例, 我们把 jquery.min.js下载到本地,存放在
src/lib/jquery.min.js
首先:下载网上的 jquery.min.js源码
然后 配置 webpack.config.js
let webpack = require("webpack");
let path = require("path");
module.exports = {
.......
resolve:{
alias:{
jquery$:path.resolve(__dirname,"./src/lib/jquery.min.js")
}
}
// resolve alias的作用是装 jquery的模块指向本地文件 ./src/lib/jquery.min.js
plugins:[
new webpack.ProvidePlugin({
$:"jquery"
}), //这里是数组中的数据,所以要使用 “,”
]
}
这样也可以在app.js中使用 $(function(){})