webpack使用(4)之引入第三方JS库

一、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文件中都可以使用）