webpack -- 第三方模块引入

第三方模块引入

1. expose-loader方式引入

import $ from "jquery";
console.log("jquery:",$);

通过inline loader将第三方模块暴露给全局

import $ from "expose-loader?$!jquery";
console.log("jquery:",window.$);

配置webpack引入

   module:{ 
        rules: [
            {
                test: require.resolve('jquery'),
                use: 'expose-loader?$'
            }
        ]
    }

import $ from "jquery";
console.log("jquery:",$);

2.配置webpack ProvidePlugin方式引入

plugins:[
        new webpack.ProvidePlugin({
            $: 'jquery'
        })
    ],

import $ from "jquery";
console.log("jquery:",$);

3.cnd 方式引入
html页面映入cdn文件

<script type=text/javascript src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

模块中使用

import $ from "jquery";
console.log("jquery:",$);

以上方式webpack打包会把cnd文件也打包到本地代码,通过以下方式配置会忽略打包到本地代码

  externals: {
        jquery: "jQuery"
    },