0
点赞
收藏
分享

微信扫一扫

webpack系列-externals配置使用(CDN方式引入JS)

书坊尚 2022-01-31 阅读 122


文章目录


  • 方式一:使用html-webpack-externals-plugin
  • 方式二:直接配置externals


如果需要引用一个库,但是又不想让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' }, // 其它省略... }​

参考地址:


webpack 的externals配置webpack学习笔记—plugins(html-webpack-externals-plugin)


举报

相关推荐

0 条评论