webpack打包不引入vue、echarts等公共库
如果我们打包的时候不想将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 ></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