前言
此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出
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.$)
每个模块通过注入的方式
webpack插件 ProvidePlugin
ProvidePlugin 自动加载模块, 而不必导出 import 或 require。
webpack配置
const webpack = require('webpack')
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery'
})
]
}
通过CDN的方式引入一个库,并通过 webpack在项目中优化
如果我需要使用CDN的方式引入了好多工具库, 比如 jquery, echarts等等。
扫描二维码关注公众号,回复:
4987926 查看本文章
在模版文件中引入cdn工具库,。
如下配置:
// 入口文件
import $ from 'jquery'
console.log($)
//webpack配置
module.exports = {
externals: {
jquery: 'jQuery'
}
}
其实,我们使用这种方式的另一个目的是为了压缩工程大小,如果所有的依赖包都压缩打包到应用中,尤其是echart这样的大型库,会导致文件过大,如果外部引入,按需引入,可以压缩应用大小。