文章目录javascript
若是须要引用一个库,可是又不想让webpack打包(减小打包的时间),而且又不影响咱们在程序中以CMD、AMD或者window/global全局等方式进行使用(通常都以import方式引用使用),那就能够经过配置externals。html
这样作的目的就是将不怎么须要更新的第三方库脱离webpack打包,不被打入bundle中,从而减小打包时间,但又不影响运用第三方库的方式,例如import方式等。vue
方式一:使用html-webpack-externals-plugin首先npm 安装html-webpack-externals-plugin,以下代码:java
npm i html-webpack-externals-plugin -D
webpack
在咱们经常使用的webpack.base.conf.js中的进行配置,咱们以CDN引入vue框架为例,让其不打包到vendor.js中,在webpack.base.conf.js的配置以下:web
`const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');npm
module.exports = { // 其它省略... plugins: [ new HtmlWebpackExternalsPlugin({ externals: [{ module: 'vue', entry: 'https://lib.baomitu.com/vue/2.6.12/vue.min.js', global: 'Vue' }] }) ], // 其它省略... }`segmentfault
最后看到在index.html中动态添加了以下代码:框架
<script type="text/javascript" src="<https://lib.baomitu.com/vue/2.6.12/vue.min.js>"></script>
ide
首先在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' }, // 其它省略... }
参考地址: