前言

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

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这样的大型库，会导致文件过大，如果外部引入，按需引入，可以压缩应用大小。