# Webpack相关

TIP

CYB集成了最新v4版本的webpack，由于webpack本身超级强大的功能和扩展能力，CYB只对webpack基本的使用方式做了封装，并提供webpack.config.js的接口配置文件，根据项目的实际需求，可以扩展webpack更多功能的loader和plugin，以及个性化的灵活配置。

在cyb.config.js中提供webpack配置

// cyb.config.js

module.exports = {
/**
   * -------------------------------
   * webpack配置
   * -------------------------------
   */
  webpack: {
    /**
     * 相当于webpack.config.js的配置功能
     * 根据需求场景每个项目均可安装loader、plugin及个性化配置
     */
    config: {},
    /**
     * 用于提取合并公共模块
     * {
     *   target: '{打包名称}',
     *   chunk: ['{chunk1名称}','{chunk2名称}','{chunk3名称}']
     * }
     */
    extract: {
      js: []
    },
    /**
     * webpack打包档案分析
     */
    analyzer: {
      available: false,
      options: {}
    },
    /**
     * css-loader配置
     */
    cssLoader: {
      options: {
        sourceMap: true
      }
    },
    /**
     * less-loader配置
     */
    lessLoader: {
      options: {
        sourceMap: true
      }
    },
    /**
     * sass-loader配置
     */
    sassLoader: {
      options: {
        sourceMap: true
      }
    },
    /**
     * stylus-loader配置
     */
    stylusLoader: {
      options: {
        sourceMap: true
      }
    }
  }
}

支持独立webpack配置文件

project
├── webpack.config.js
├── webpack.config.eslint.js
└── webpack.config.vue.js

CYB同时支持如webpack.config.js、webpack.config.vue.js、webpack.config.eslint.js等以webpack.config开头的配置文件。