externals作用
webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。
如果需要引用一个库或文件,但是又不让它被webpack打包(减少打包的时间+减少打包后的bundle文件体积),且不影响在程序中以CMD、AMD或者window/global全局等方式进行使用(一般都以import方式引用使用),那就可以通过配置externals来实现。
总结这样做目的就是:
将不怎么需要更新的第三方库,脱离webpack打包,不被打入bundle中,从而减少打包时间,但又不影响我们使用第三方库的方式,例如import方式等
externals用法
module.exports={
configureWebpack:congig =>{
externals:{
key: value
}
}
}
语法说明
-
key是第三方依赖库的名称,同package.json文件中的dependencies对象的key一样
-
value值可以是字符串、数组、对象。应该是第三方依赖编译打包后生成的js(要用CDN引入的js文件)文件,执行后赋值给window的全局变量名称。
externals使用举例
(1)在index.html
中引入CDN的资源,如react全家桶之类的资源
<script src="https://lib.baomitu.com/react/16.4.0-alpha.7926752/cjs/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/cjs/react-dom-server.browser.development.js"></script>
(2)webpack.config.js 中配置
module.exports = {
...
output: {
...
},
externals : {
react: 'react',
redux: 'redux'
}
...
}
(3)以import的方式(还支持其他方式)引用
import React from 'react'
import { createStore, combineReducers, applyMiddleware } from 'redux'
这样不仅之前对第三方库的用法不变,还把第三方库剥离出webpack的打包中,从而加快webpack的打包速度。
参考: