一、script引入第三方库lodash
不建议使用
<script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
二、 npm 引入的方式
测试使用webpack.providePlugin插件
第一步:npm i --save lodash
使用webpack.providePlugin插件需要配置webpack
npm i webpack --save-dev
第二步:进行配置
const webapck = require("webpack");
plugins:[
new webapck.ProvidePlugin({
_:' lodash '
})
]
配置后的webpack.conf.js
const path = require("path");
const webapck = require("webpack");
module.exports={
//相对路径
// entry:"./js/index.js",
entry:{
index:"./js/index.js"
},
output:{
filename:"[name][hash:8].js",
//绝对路径
path:path.resolve(__dirname,"dist")
},
plugins:[
new webapck.ProvidePlugin({
_:'lodash'
})
]
}
第三步:在模块中使用(任何js文件中都可以使用)
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
三、本地文件
第一步:将lodash文件引入到本地
第二步:进行配置
resolve:{
alias:{
lodash $:path.resolve(__dirname," lodash / lodash.js")
}
},
plugins:[
new webapck.ProvidePlugin({
_:' lodash '
})
]
配置后的webpack.conf.js
const path = require("path");
const webapck = require("webpack");
module.exports={
//相对路径
// entry:"./js/index.js",
entry:{
index:"./js/index.js"
},
output:{
filename:"[name][hash:8].js",
//绝对路径
path:path.resolve(__dirname,"dist")
},
resolve:{
alias:{
lodash_:path.resolve(__dirname,"js/lodash/index.js")
}
},
plugins:[
new webapck.ProvidePlugin({
_:'lodash'
})
]
}
第三步:在模块中使用(任何js文件中都可以使用)