在 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 %>



  • 2020-02-20 18:35:21

    Vue加载组件、动态加载组件的几种方式

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展。

  • 2020-02-22 13:58:50

    深入理解 requestAnimationFrame

    在Web应用中,实现动画效果的方法比较多,Javascript 中可以通过定时器 setTimeout 来实现,css3 可以使用 transition 和 animation 来实现,html5 中的 canvas 也可以实现。除此之外,html5 还提供一个专门用于请求动画的API,那就是 requestAnimationFrame,顾名思义就是请求动画帧。 为了深入理解 requestAnimationFrame 背后的原理,我们首先需要了解一下与之相关的几个概念:

  • 2020-02-22 17:35:14

    使用tweenjs写一个发牌的demo

    移动端h5的三大抽奖方式:转盘,老虎机,翻纸牌。 前两样demo比较多,用户也审美疲劳了。这次微信公众号要抽奖,于是调研了下翻纸牌。