• webpack.config.js 如何配置页面 CDN 引用的外部模块


    如果html页面引用了 外部 cdn模块,例如有如下页面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>***</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap2/bootstrap-switch.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
    </head>
    <body>
      ... ...
      
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
    </body>
    </html>
     
    标红处为cdn引用外部js模块;
    以上js模块在 webpack.config.js 打包配置文件中就需要被排除掉,webpack.config.js 使用 externals 节配置,形式如下:
     
    import webpack from "webpack";
     
    module.exports={
      ... ...
      , plugins: [
           ... ...
             // 此处,需要新增一个模块声明插件,该插件是webpack的内置插件,直接实例化即可引用,作用是给各页面导入外部模块的引用名
              , new webpack.ProvidePlugin({  $: "jquery",  
                                                                               jQuery: "jquery", 
                                                                               'window.jQuery': "jquery",
                                                                               bootstrap: "bootstrap",
                                                                               bootstrapswitch: "BootstrapSwitch"
                                                                            })
            ]
       //  因为已经在页面做了CDN引用,无需再次编译,所以需要在此处增加一个 externals 节,将html的js里引用的外部模块都排除掉,防止这些模块参与编译,这里是 key:value 形式的对象,其中 key 是要在页面中使用的模块名例如 $("body") 中的 $ 符号,value 是该外部模块导出的名称,例如 ./node_modules/@types/jquery/index.d.ts 类型文件中 export = jQuery; 中的 jQuery
             , externals: { 
                                  "$": "jQuery",
                                  "jquery": "jQuery",
                                  "window.jquery": "jQuery",
                                  "bootstrap": "Bootstrap",
                                  "bootstrapswitch": "BootstrapSwitch"
                                }
    }
     
    以上html红色部分外部js模块cdn引用,在当前页面的ts文件中不要写 import 或者 require 引入语句引入该模块的js内容;因为在webpack.config.js中已经引用过了。
    以上就是 webpack.config.js 中如何配置 html 页面的 cdn 外部模块引用方式,总之就是一句话,在html中引用的cdn模块就要在webpack.config.js 中排除掉,不参与编译即可
  • 相关阅读:
    【洛谷P3368】 【模板】树状数组 2
    树状数组
    【codevs1519】 过路费
    【洛谷P3398】 仓鼠找sugar
    【洛谷P2912】 [USACO08OCT]牧场散步Pasture Walking
    字符串哈希函数
    【洛谷P3498】 [POI2010]KOR-Beads
    NOIp2011 选择客栈
    【洛谷P1381】单词背诵
    P3396 哈希冲突
  • 原文地址:https://www.cnblogs.com/hgm210/p/13092040.html
Copyright © 2020-2023  润新知