在 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-12-18 23:26:00

    FFMPEG命令记录

    ffmpeg,拼接两个音频,剪切音频片段,多个音频混音,剪切一段MP4并转换成gif,改变音量大小,音频淡入淡出,音频格式处理

  • 2019-12-19 00:04:44

    ffmpeg concat video and mix audio

    在ffmpeg中,官网给出两种连接媒体文件(音频、视频、etc..)的解决方案。 the concat "demuxer" the concat "protocol" 对比而言, demuxer更加灵活一些,需要媒体文件是属于相同的编解码器,但是可以属于不同的容器格式(mp3,wav, mp4, mov, etc..). 而protocol只适用于少数集中容器格式。

  • 2019-12-19 00:16:30

    android采用FFmpeg实现音频混合与拼接剪切

    接触FFmpeg有一段时间了,它是音视频开发的开源库,几乎其他所有播放器、直播平台都基于FFmpeg进行二次开发。本篇文章来总结下采用FFmpeg进行音频处理:音频混合、音频剪切、音频拼接与音频转码。

  • 2019-12-19 15:01:58

    spring boot 在Linux下服务启动报错Unable to find Java

    将 Spring boot 安装为 Linux 服务启动,后输入 service myapp start 报错 Unable to find Java ,但是使用 java -jar myapp.jar 启动成功。不知道为啥引起的,经过百度找到下面这个解决方法和我的情况一样,终于把问题解决

  • 2019-12-19 16:44:01

    根据条件配置多个npm仓库

    scope 是一种很好的包管理方式。统一的“命名空间”,清晰、好辨识;在 registry 中使用统一的 organization 管理,不必担心命名冲突和冒用等。 在实际使用中,一个常见的场景是公司的私有仓库。使用统一的 scope 定义在私有仓库中定义私有包,绝对是一个非常好的方式。 指定 scope 从指定仓库安装