zoukankan      html  css  js  c++  java
  • 配置webpack的externals不打包第三方包

    为什么要配置externals

    • 官网解释:

    webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是,所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。

    怎么理解呢,意思是如果需要引用一个库,但是又不想让webpack打包(减少打包的时间),并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用(一般都以import方式引用使用),那就可以通过配置externals。

    这样做的目的就是将不怎么需要更新的第三方库脱离webpack打包,不被打入bundle中,从而减少打包时间,但又不影响运用第三方库的方式,例如import方式等。

    externals支持模块上下文的方式

    • global - 外部 library 能够作为全局变量使用。用户可以通过在 script 标签中引入来实现。这是 externals 的默认设置。

    • commonjs - 用户(consumer)应用程序可能使用 CommonJS 模块系统,因此外部 library 应该使用 CommonJS 模块系统,并且应该是一个 CommonJS 模块。

    • commonjs2 - 类似上面几行,但导出的是 module.exports.default。

    • amd - 类似上面几行,但使用 AMD 模块系统。

    怎么运用externals

    例如:

    index.html中引入CDN的资源react全家桶之类的资源

          <script src="https://lib.baomitu.com/react/16.4.0-alpha.7926752/cjs/react.development.js"></script>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/cjs/react-dom-server.browser.development.js
    "></script>
         
    

    webpack.config.js配置如下:

      module.exports = {
         ...
         output: {
           ...
         },
         externals : {
           react: 'react',
           redux: 'redux'
         }
         ...
       }
    
    

    这样的话在应用程序中依旧可以以import的方式(还支持其他方式)引用:

    import React from 'react';
    import { createStore, combineReducers, applyMiddleware } from 'redux';
    
    

    这样不仅之前对第三方库的用法方式不变,还把第三方库剥离出webpack的打包中,从而加速webpack的打包速度。

    externals和libraryTarget的关系

    • libraryTarget配置如何暴露 library。如果不设置library,那这个library就不暴露。就相当于一个自执行函数

    • externals是决定的是以哪种模式去加载所引入的额外的包

    • libraryTarget决定了你的library运行在哪个环境,哪个环境也就决定了你哪种模式去加载所引入的额外的包。也就是说,externals应该和libraryTarget保持一致。library运行在浏览器中的,你设置externals的模式为commonjs,那代码肯定就运行不了了。

    • 如果是应用程序开发,一般是运行在浏览器环境libraryTarget可以不设置,externals默认的模式是global,也就是以全局变量的模式加载所引入外部的库。



    作者:magicwager
    链接:https://www.jianshu.com/p/283b17d17b3c
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    移动开发 Native APP、Hybrid APP和Web APP介绍
    urllib与urllib2的学习总结(python2.7.X)
    fiddler及postman讲解
    接口测试基础
    UiAutomator2.0 和1.x 的区别
    adb shell am instrument 命令详解
    GT问题记录
    HDU 2492 Ping pong (树状数组)
    CF 567C Geometric Progression
    CF 545E Paths and Trees
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/12986126.html
Copyright © 2011-2022 走看看