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

筆記地址