zoukankan      html  css  js  c++  java
  • webpack CommonsChunkPlugin的一些总结,以及如何分别打包公共代码和第三方库

    CommonsChunkPlugin

    官方文档地址
    https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin

    new webpack.optimize.CommonsChunkPlugin(options)
    

    相关设置总结

    • options.name or options.names (string|string[])
      设置公共代码块的name。
      • 如果name的值不与任何已存在的chunk相同,则会从options.chunks中提取出公共代码,并形成新的chunk,并以options.name去设置该chunk的name
      • 如果name选中的是已存在的chunk,则会从options.chunks中提取出被name选中的chunk。
      • 如果name是不存在的chunk,则会根据其他配置提取出公共chunk,并将该chunk的name值设为opitons.name的值
      • 如果name是个数组,则等同于每个name轮番调用该插件。
      • options.filename的区别。options.filename是chunk的文件名的,而options.name相当于chunk的唯一标识符,在filename值省略的情况下,options.filename会默认取options.name的值。

    官方文档及个人翻译

    The chunk name of the commons chunk. An existing chunk can be selected by passing a name of an existing chunk. If an array of strings is passed this is equal to invoking the plugin multiple times for each chunk name. If omitted and options.async or options.children is set all chunks are used, otherwise options.filename is used as chunk name.

    公共chunk(代码块,个人习惯叫chunk)的chunk name值。通过传入一个已存在的chunk name的值可以选中该chunk。传入一个数组的话就等同于用每一个name轮番调用。如果省略该值并且options.asyncoptions.children被设为了全部chunks可用,则options.filename会被用作name的值。

    • options.filename (string)
      设置代码块的文件名称
    • options.chunks (string[])
      设置公共代码的入口文件。默认是所有的entry。
    • options.minChunks (number|Infinity|function(module, count) -> boolean)
      设置最小被引用次数,最小是2
    • options.children (string[])

    If true all children of the commons chunk are selected.

    • options.async (boolean|string)

    If true a new async commons chunk is created as child of options.name and sibling of options.chunks. It is loaded in parallel with options.chunks. It is possible to change the name of the output file by providing the desired string instead of true.

    • options.minSize (number)

    Minimum size of all common module before a commons chunk is created.


    如何分别打包第三方库和公共代码库

    {
      entry: {
        // 主入口文件1
        main1: './mian1.js',
        
        // 主入口文件2
        mian2: './mian2.js',
        
        // 第三方库
        vendor: [
          'vue',
          'vuex',
          'whatwg-fetch',
          'es6-promise'
        ],
      },
    
      output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'js/[name].bundle.js'
      },
      
      // ...
      // ...
      // ...
      
      plugins: {
        // 将 main1 和 main2 的公共代码提取出来打包
        new webpack.optimize.CommonsChunkPlugin({
          name: 'common',
          chunks: ['main1', 'main2'],
          filename: 'js/common.bundle.js',
          minChunks: 2,
        }),
    
        // 将 vendor 从 common 中提取出来分别打包
        new webpack.optimize.CommonsChunkPlugin({
          name: 'vendor',
          chunks: ['common'],
          filename: 'js/vendor.bundle.js',
          minChunks: Infinity,
        }),
      },
    }
    

    结果:
    打包出四个文件。

    1. main1.bundle.js // 仅包含 main1.js 独有代码
    2. main2.bundle.js // 仅包含 main2.js 独有代码
    3. common.bundle.js // 包含main1 和 main2 的公共代码(不包含第三方库)
    4. vendor.bundle.js // 仅包含第三方库

    作者博客:pspgbhu http://www.cnblogs.com/pspgbhu/

    作者GitHubhttps://github.com/pspgbhu

    欢迎转载,但请注明出处,谢谢!

  • 相关阅读:
    渗透测试靶场
    Ubuntu kylin优麒麟下配置Hadoop环境
    虚拟机win+IIs+asp+access搭建网站过程
    百度增强搜索
    渗透入门——术语概述
    api如何获取cookie
    还在纠结接口文档的事儿呢?
    为什么需要API管理平台
    自动生成接口文档的三种方式
    轻量化API测试工具整理
  • 原文地址:https://www.cnblogs.com/pspgbhu/p/6262477.html
Copyright © 2011-2022 走看看