使用webpack

Question

我们使用Webpack（https://github.com/tocco/tocco-client）将React组件打包为Node模块。这些模块应自包含所有单独的样式作为即时使用的css文件和作为主题的scss文件。

Webpack编译之前的文件结构

package-1/
    dist/
    src/
        component-a/
            component-a.js
            component-a.scss
        component-b/
            component-b.js
            component-b.scss

Webpack编译后所需的文件结构

package-1/
    dist/
        package-1.js  /* contains component-a.js and component-b.js */
        package-1.css  /* contains component-a.scss and component-b.scss */
        package-1.scss  /* contains component-a.scss and component-b.scss */
    src/
        component-a/
            component-a.js
            component-a.scss
        component-b/
            component-b.js
            component-b.scss

使用Webpack加载器，可以在一次运行中编写package-1.css或package-1.scss，但不能编写这两个文件。似乎所有具有相同“测试模式”的加载器都组合在一个任务管道中。

以下实施基于https://github.com/webpack/extract-text-webpack-plugin

插件的实例

let extractSASS = new ExtractTextPlugin('index.scss')
let extractCSS = new ExtractTextPlugin('index.css')

示例1：导致错误，因为css-loader呈现两次

webpackConfig.module.loaders.push(
    {
        test: /\.scss$/,
        loader: extractSASS.extract('css-loader')
    },
    {
        test: /\.scss$/,
        loader: extractCSS.extract('css-loader!sass-loader')
    }
)

示例2：不会导致错误，只会写入css文件

webpackConfig.module.loaders.push(
    {
        test: /\.scss$/,
        loader: extractSASS.extract('css-loader')
    },
    {
        test: /\.scss$/,
        loader: extractCSS.extract('sass-loader')
    }
)

示例3：不会导致错误，只会写入scss文件

webpackConfig.module.loaders.push(
    {
        test: /\.scss$/,
        loader: extractSASS.extract('css-loader')
    }
)

示例4：不会导致错误，只会写入scss文件

webpackConfig.module.loaders.push(
    {
        test: /\.scss$/,
        loader: extractCSS.extract('css-loader!sass-loader')
    }

）

问题：

1. 是否可以在装载管道中间生成输出？
2. 是否可以为每个单独定义的加载器生成一个输出，就像配置“示例1”一样？
3. Webpack是否需要某个实现来生成一个文件类型的几个输出（有几个scss文件，并且需要一个scss文件和一个css文件）？