Webpack:从同一来源生成多个css文件

Webpack是一个现代化的静态模块打包工具，它可以将多个源文件打包成一个或多个目标文件。在前端开发中，Webpack主要用于处理JavaScript、CSS、图片等静态资源，并将它们打包成浏览器可识别的文件。

Webpack的主要特点包括：

模块化支持：Webpack支持使用模块化的方式组织代码，可以将代码拆分成多个模块，提高代码的可维护性和复用性。
代码分割：Webpack可以将代码分割成多个块，实现按需加载，减小初始加载的文件大小，提高页面加载速度。
资源优化：Webpack可以对静态资源进行优化，例如压缩、合并、混淆等，减小文件大小，提高页面性能。
插件系统：Webpack提供了丰富的插件系统，可以通过插件扩展其功能，例如自动化构建、代码分析、热模块替换等。

对于从同一来源生成多个CSS文件的需求，可以通过Webpack的插件和配置来实现。以下是一种常见的实现方式：

配置多个入口文件：在Webpack的配置文件中，可以指定多个入口文件，每个入口文件对应一个CSS文件的生成。
使用ExtractTextWebpackPlugin插件：该插件可以将CSS提取到单独的文件中，避免将CSS打包到JavaScript文件中。
配置CSS文件的输出路径和文件名：可以通过配置Webpack的output选项，指定生成的CSS文件的输出路径和文件名。

示例配置如下：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main.js',
    other: './src/other.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
};

在上述配置中，我们定义了两个入口文件main.js和other.js，分别对应生成main.css和other.css。使用ExtractTextWebpackPlugin插件将CSS提取到单独的文件中，并通过output选项指定输出路径和文件名。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），详情请参考腾讯云CDN产品介绍

注意：本答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，如需了解相关产品和服务，请自行搜索相关信息。