zoukankan      html  css  js  c++  java
  • webpack系列-externals配置使用(CDN方式引入JS)

    如果需要引用一个库,但是又不想让webpack打包(减少打包的时间),并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用(一般都以import方式引用使用),那就可以通过配置externals。

    这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包,不被打入bundle中,从而减少打包时间,但又不影响运用第三方库的方式,例如import方式等。

     方式一:使用html-webpack-externals-plugin

    首先npm 安装html-webpack-externals-plugin,如下代码:

    npm i html-webpack-externals-plugin -D

    在我们常用的webpack.base.conf.js中的进行配置,我们以CDN引入vue框架为例,让其不打包到vendor.js中,在webpack.base.conf.js的配置如下:

    const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
    
    module.exports = {
        // 其它省略...
        plugins: [
            new HtmlWebpackExternalsPlugin({
              externals: [{
                module: 'vue',
                entry: 'https://lib.baomitu.com/vue/2.6.12/vue.min.js',
                global: 'Vue'
              }]
            })
        ],
        // 其它省略...
    }

    最后看到在index.html中动态添加了如下代码:

    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>

     方式二:直接配置externals

    首先在index.html中script标签引入JS,如下代码:

    <script type="text/javascript" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script>

    在webpack.base.conf.js的配置如下:

    module.exports = {
        // 其它省略...
        externals: {
            vue: 'Vue'
        },
        // 其它省略...
    }

     参考地址:

  • 相关阅读:
    期末总结
    虚拟存储器学习记录
    实验报告
    并发编程学习记录
    进程&信号&管道实践学习记录
    异常控制流学习记录
    系统级IO实践学习记录
    系统级I/O学习记录
    Arduino小车学习与研究
    期中总结
  • 原文地址:https://www.cnblogs.com/moqiutao/p/13744854.html
Copyright © 2011-2022 走看看