zoukankan      html  css  js  c++  java
  • 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 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

  • 相关阅读:
    【题解】B进制星球
    高斯消元
    7.16
    题解 P1572 【计算分数】
    7.30
    7.31
    项目中使用 MyBatis(一)
    从整体上了解Spring MVC
    Spring注解
    Spring IOC 和 DI
  • 原文地址:https://www.cnblogs.com/so-letitgo/p/8694857.html
Copyright © 2011-2022 走看看