para - etiquetas css

Cómo sperates menos archivos en un archivo css con webpack 2?

Question

Puedo compilar menos en la página dentro del <style></style> por webpack2. pero no puedo compilar menos archivos en un archivo CSS.

webpack.config.js:

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

var ENV = process.env.NODE_ENV;
var port = ''10101'';

var commonAttr = [''common'', ''markerFactory'', ''sceneTransform'', ''sparFactory'', ''upload''];
var vendorArr = [];
for (var i = 0, l = commonAttr.length; i < l; i++) {
    vendorArr.push(path.resolve(__dirname + ''/script/common/'', commonAttr[i] + ''.js''))
}

var config = {
    entry: {
        vendor: vendorArr,
        app: ''./script/app'',
    },
    output: {
        path: path.resolve(__dirname, ''wds''),
        filename: ''[name].bundle.js'',
        publicPath: ''/wds/''
    },
    module: {
        rules: [{
            test: //.js$/,
            exclude: /node_modules/,
            use: ''babel-loader''
        },
        // // this option will compile the less to css, and append style tag to the page
        {
            test: //.less$/,
            use: [
                "style-loader",
                "css-loader",
                "less-loader"
            ]
        },

        // I tried to split the css file into a indenpendent file, but it didn''t work
        {
            test: //.less$/,
            use: {
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader!less-loader",
                })
            }
        },
        {
            test: //.html$/,
            use: "handlebars-loader?helperDirs[]=" + __dirname + "/script/helpers"
        }]
    },
    plugins: [
        new ExtractTextPlugin(''[name].bundle.css''),
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js"
        })
    ],
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    devServer: {
        compress: true,
        // hot: true,
        publicPath: ''/wds/'', //可访问的路径地址
        port: port
    }
}

if (ENV == ''development'') {
    config.devtool = ''inline-source-map''; // 将模块单独编译 成 单个文件 浏览器可调试
}
else {
    config.devtool = ''eval-source-map''; // 将模块压缩一个文件一行 打包进bundle
}

var compiler = webpack(config);

module.exports = config;

Pero da los siguientes errores:

Si no uso ExtractTextPlugin en las rules use loader , puede compilarse a la etiqueta de estilo. ¿Dónde está yendo mal?

Answer 1

Lo siento, lo arreglé!

definir:

    var extractLESS = new ExtractTextPlugin(''[name].bundle.css'');

módulo:

    rules:[{
            test: //.less$/,
            use: extractLESS.extract([ ''css-loader'', ''less-loader'' ])
        }]

enchufar:

plugins: [
    extractLESS,
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        filename: "vendor.js"
    })
],