webpack打包不引入vue、echarts等公共库

最新推荐文章于 2024-05-16 02:16:33 发布

weixin_30838921

最新推荐文章于 2024-05-16 02:16:33 发布

阅读量1k

点赞数

文章标签： javascript webpack ViewUI

原文链接：http://www.cnblogs.com/so-letitgo/p/8694857.html

版权

如果我们打包的时候不想将vue、echarts等公共库包含在内，需要配置两处地方, 以下以基于vue-cli生成的项目为基准：

１webpack配置:

// webpack.base.conf.js 
....    
  externals: {
    'vue': 'Vue',
    'echarts': 'echarts',
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
    }
  },
...

２html文件添加

<!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

转载于:https://www.cnblogs.com/so-letitgo/p/8694857.html

weixin_30838921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack打包不引入vue、echarts等公共库

如果我们打包的时候不想将vue、echarts等公共库包含在内，需要配置两处地方, 以下以基于vue-cli生成的项目为基准：１webpack配置:// webpack.base.conf.js .... externals: { 'vue': 'Vue', 'echarts': 'echarts', }, resolve: {...
复制链接

扫一扫