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