如果我们打包的时候不想将vue、echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准:
1webpack配置:
// webpack.base.conf.js
....
externals: {
'vue': 'Vue',
'echarts': 'echarts',
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@': resolve('src'),
}
},
...
2html文件添加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>full-run-only</title>
</head>
<body>
<script src="./static/lib/echarts-4.0.3.min.js"></script>
<script src="./static/lib/vue-2.5.16.min.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
绿色字体部分配置就是我们需要的公共库映射,注意这里的key代表的是在模块中使用import引入的那个模块名称,value代表的是我们在html文件中直接引入的库文件(红色文字)在window中注册的全局变量名称。
这样配置后,只要html文件能正常引用库文件,即使我们node_modules下的对应模块删了也能正常使用
webpack原文链接: https://webpack.js.org/configuration/externals/#externals