• 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 中排除掉,不参与编译即可
  • 相关阅读:
    Google字典API与语音库
    CentOS 6.0 安装字符界面/text 安装/文本安装
    W3C Strict 验证的几个注意事项
    前端开发必备的6个Firefox插件
    自制的一套Aptana配色方案
    Firebug Console 与命令行全集
    项目管理的“三边六拍”!
    不使用第三个变量,交换两变量的值 (总结篇)
    dba学习笔记
    三思涂抹oracle(笔记)
  • 原文地址:https://www.cnblogs.com/hgm210/p/13092040.html
Copyright © 2020-2023  润新知