在 webpack使用HtmlWebpackPlugin根据环境变量添加min或者开发版本

2020-01-14 01:20:10

同有个疑问,cdn区分开发版本和生产版本呀。怎么去动态设置呢??



在 webpack 的HtmlWebpackPlugin中直接定义一个变量,比如 cdn_scripts


const cdn_scripts = ['/static/js/my-3rd-lib-in-static-dir.min.js', 'http://jquery...', 'http://axios...']if(process.env.NODE_ENV === 'production'){
    cdn_scripts.push('http://vue.min.js...')
}else {
    cdn_scripts.push('http://vue.js...')
}new HtmlWebpackPlugin({
            ...其他配置略,            cdn_scripts: cdn_scripts
        })

然后在 index.html </body> 前面添加:


<% for (var i = 0; i < htmlWebpackPlugin.options.cdn_scripts.length; i++) {  %>
           <script src="<%= htmlWebpackPlugin.options.cdn_scripts[i] %>"></script>
 <% }  %>


或者


const is_prod = process.env.NODE_ENV === 'production'const min = is_prod ? '.min' : ''const cdn_scripts = [    '/static/js/my-3rd-lib-in-static-dir.min.js',    `//cdn.bootcss.com/jquery/3.4.0/jquery.slim${min}.js`,    `//cdn.bootcss.com/vue/2.6.10/vue${min}.js`,    `//cdn.bootcss.com/axios/0.19.0-beta.1/axios${min}.js`,
]

更简单的


const cdn_html = `
    <script src="//cdn.bootcss.com/jquery/3.4.0/jquery.slim${min}.js"></script>
    <script src="//cdn.bootcss.com/axios/0.19.0-beta.1/axios${min}.js"></script>
    <script src="//cdn.bootcss.com/lodash.js/4.17.12-pre/lodash${min}.js"></script>
    <script src="//cdn.bootcss.com/vuex/3.1.0/vuex${min}.js"></script>
    <script src="//cdn.bootcss.com/vue/2.6.10/vue${min}.js"></script>
    <script src="//cdn.bootcss.com/vue-router/3.0.6/vue-router${min}.js"></script>
    <link rel="stylesheet" link="//cdn.bootcss.com/xxx.css" >
`new HtmlWebpackPlugin({
            ...其他配置略,            cdn_html: cdn_html
        })

然后 </body> 前面直接添加:

<%= htmlWebpackPlugin.options.cdn_html %>



  • 2019-03-15 15:28:33

    10分钟教你搭建自己的ngrok服务器

    内网穿透想必开发过微信的同志都很了解,大部分人选择网上寻找各种现成的,比如ngrok官网、ittun-ngrok、sunny-ngrok或者花生壳之类的。但是世界上没有免费的午餐,要不就是收费,要不就是免费但是偶尔会出现连接失败的问题(当然大多数时间是没有问题的)。

  • 2019-03-15 15:29:53

    丢弃花生壳,搭建自己的ngrok作为内网穿透服务器

    公司没有公网,公司在二级路由下面(就是服务商没有给独立IP,也无法动态获取公网IP),然而公司在开发程序的时候,如对接微信等需要返回数据,或者需要别人能访问我们网址,一般我们就只能购买花生壳内网穿透,但是在使用中发现速度慢,经常掉。所以搭建自己的ngrok服务器来保证内网穿透。

  • 2019-03-15 15:31:21

    内网穿透 ngrok 服务器和客户端配置

    ngrok 简介及作用 ngrok 是一款用 go 语言开发的开源软件,它是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。下图简述了 ngrok 的原理。

  • 2019-03-15 15:32:09

    内网打洞以及代码实现

    假设内网的多个ip或者同一ip的不同port,都要访问同一个(外网ip:port)。对NAT来说,从外网接收的包它的(srcIp:srcPort)==(serverIp,serverPort),它的dstIp==natIp,所以NAT只能用dstPort来决定把这个包转发给哪一个(内网Ip:port)

  • 2019-03-15 15:33:08

    Xshell不能按退格、删除键的解决方案

    在使用xshell时,由于每个服务器不同,一些无法使用Backspace键向后删除字符。针对这个问题,本文为大家解答下退格键无法识别如何设置?

  • 2019-03-15 15:49:28

    win10远程桌面连接不上解决方法

    有朋友就感叹电脑的世界真的是很神奇,可以将整个世界连接在一起。如果别人想要摆弄你的电脑,即使不在一个地方也可以利用远程桌面来控制。而这就是所谓的远程控制操作了,大部分人都知道它的作用,不过这也不排除会遇到一些突发情况的时候,例如win10远程桌面连接不上,这该怎么去解决呢?为此,小编给大家带来了解决的图文操作。

  • 2019-03-15 16:49:18

    Win7无法进入家庭组提示“您的系统管理员不允许访问家庭组”怎么办

     家庭组是家庭网络上可以共享文件和打印机的一组计算机,可以方便用户们共享文件或者视频等,可是最近有win7纯净版系统用户却发现无法进入家庭组,提示“您的系统管理员不允许访问家庭组”,该怎么办呢?现在给大家分享一下Win7无法进入家庭组提示“您的系统管理员不允许访问家庭组”的解决方法。

  • 2019-03-17 22:19:28

    动态更新Toolbar Menu以及Menu中同时显示文字和图标

    我们经常会有这样的需求,在切换Fragment或者点击某个按钮后动态更新Toolbar上Menu项.但是onCreateOptionsMenu方法只在创建Activity的时候调用一次,以后就不再调用了,所以就不能在onCreateOptionsMenu中做处理了。 不过系统提供了另外的一个方法onPrepa