webpack2 如何作loader的模块匹配

Question

需求如下：

a.js 中引入两个css模块，分辨是mobile.css和pc.css，我通过extractTextPlugins想分别输出两个css文件

但是问题：

分不出来。。。。

webpack.config.js

let VERSION = '1.3.0';
let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let pcCss = new ExtractTextPlugin('./[name].css')
let mobileCss = new ExtractTextPlugin('./[name].css')
module.exports = {
    entry: {
        'pc': './iui-webpack/entry.pc.js',
        'wap': './iui-webpack/entry.wap.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: 'iui.[name].' + VERSION + '.js'
    },
    plugins: [
        // new webpack.optimize.UglifyJsPlugin(),
        pcCss,
        mobileCss
    ],
    module: {
        rules: [{
            test: /\.js$/,
            use: {
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        }, {
            test: /\.scss$/,
            use: pcCss.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'sass-loader'] })
        }, 
        {
            test: /\.scss$/,
            loader: mobileCss.extract({
                fallbackLoader: 'style-loader',
                loader: ['css-loader', 'sass-loader']
            })
        }
        ]
    }
};

Answer 1

ExtractTextPlugin 对应的每个 entry 只能抽取出一个文件，所以你需要写两个 entry 如：

• pc.js 包含 pc.css

• mobile.js 包含 mobile.css

---

PS: 我们自己基于 webpack 写了个工具 dool 支持 entry 是 css 或 less 文件，可参见这个 multi page demo