webpack 使用外部的库_Webpack4 学习笔记四 暴露全局变量、externals

前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

webpack 暴露全局变量

通过 expose-loader 内联配置

在 webpack中配置

每个模块通过注入的方式

通过cdn的方式引入一个库,并通过 webpack在项目中优化

通过 expose-loader 内联配置

cnpm i jquery --save 安装 jquery库

import $ from 'jquery'

console.log($) // 可以访问

console.log(window.$) // undefined

expose-loader 加载程序向全局对象添加模块

cnpm i expose-loader --save-dev

将jquery暴露至全局并用$引用

webpack配置

入口文件

import $ from 'expose-loader?$!jquery'

console.log(window.$)

在 webpack中配置

module.exports = {

module: {

rules: [

{

test: require.resolve('jquery'),

loader: 'expose-loader?$'

}

]

}

}

入口文件直接引用jquery,也可以全局访问

import $ from 'jquery'

console.log(window.$)