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.$)

每个模块通过注入的方式

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的使用

笔记地址