# 提取、合并公共代码

# 基本模式

提取合并使用NPM安装第三方框架库文件或部署在src/views/public目录中的公共脚本文件

//cyb.config.js

module.exports = {
  webpack: {
    /**
     * 用于提取合并公共模块
     * {
     *   target: '{打包名称}',
     *   chunk: ['{chunk1名称}','{chunk2名称}','{chunk3名称}']
     * }
     */
    extract: {
      js: []
    }
  }
}

CYB默认会将引入node_modules目录中的文件提取合并为dist/js/vendor-webpack.js和dist/css/vendor-webpack.css。多个页面引用的项目公共文件提取合并为dist/js/common-webpack.js和dist/css/common-webpack.css。

提取合并使用Bower安装的第三方框架库文件和部署在src/common目录中的公共文件

//cyb.config.js

module.exports = {
  merge: {
    /**
     * 用于合并使用bower安装的第三方框架库资源
     */
    vendor: {
      available: true, //启用 vendor 文件自动化注入
      /**
       * 合并vendor脚本
       * {
       *    target: '{打包名称}.js',
       *    contain: ['**/{文件1}.js', '**/{文件2}.js', '**/{文件3}.js']
       * }
       */
      js: [],
      /**
       * 合并vendor样式
       * {
       *    target: '{打包名称}.css',
       *    contain: ['**/{文件1}.css', '**/{文件2}.css', '**/{文件3}.css']
       * }
       */
      css: []
    },
    /**
     * 用于合并部署在src/common目录中的项目公共资源
     */
    common: {
      available: true, //启用 common 文件自动化注入
      /*
       * 合并common脚本
       * {
       *    target: '{打包名称}.js',
       *    contain: ['**/{文件1}', '**/{文件2}', '**/{文件3}']
       * }
       */
      js: []
    }
  }

CYB默认将所有'bower.json'配置中的文件合并为dist/js/vendor-bower.js和dist/css/vendor-bower.css。将部署在src/common目录中的脚本文件合并为dist/js/common-browser.js。将部署在src/static/styles/common*.{css,less,scss,styl}样式生成为dist/static/css/common.css。

# 高级模式

具体使用请参考：https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

//webpack.config.js

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        'demo-xxx': {
           ... 
        }
      }
    }
  }
}