Webpack4 学习笔记四 暴露全局变量、externals
程序员文章站
2022-09-04 17:50:28
前言 此内容是个人学习笔记,以便日后翻阅。 非教程,如有错误还请指出 webpack 暴露全局变量 通过 expose loader 内联配置 在 webpack中配置 每个模块通过注入的方式 通过CDN的方式引入一个库,并通过 webpack在项目中优化 通过 expose loader 内联配置 ......
前言
此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出
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等等。
在模版文件中引入cdn工具库,。
如下配置:
// 入口文件 import $ from 'jquery' console.log($) //webpack配置 module.exports = { externals: { jquery: 'jquery' } }
其实,我们使用这种方式的另一个目的是为了压缩工程大小,如果所有的依赖包都压缩打包到应用中,尤其是echart这样的大型库,会导致文件过大,如果外部引入,按需引入,可以压缩应用大小。