欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

参考文章: webpack的externals的使用

笔记地址