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

 

如果我们打包的时候不想将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

posted @ 2018-04-02 16:34  深海懒猫  阅读(924)  评论(0)  编辑  收藏  举报