D
D
Denis2017-09-10 22:55:49
webpack
Denis, 2017-09-10 22:55:49

ExtractTextPlugin not generating css from less?

I'm looking into using less with webpack. I wrote a small config, I run webpack, there are no errors, but css does not collect. Connected ExtractTextPlugin. Everything seems to be fine, but something is missing. Help me to understand. Here is my config:

var webpack = require('webpack');
var NODE_ENV = process.env.NODE_ENV || 'development';
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: __dirname + '/js/src',
    entry: {
        main: './main.js',
        about: './about.js'
    },
    output: {
        path:  __dirname + '/public',
        publicPath: '/',
        filename: "[name].js"
        // path: __dirname + '/js/dist',
        // publicPath: '/js/dist/',
        // filename: "[name].js",
        // chunkFilename: '[id].[name].js',
        // library: '[name]'
    },
    watch: NODE_ENV == 'development',
    watchOptions: {
        aggregateTimeout: 100
    },
    devtool: NODE_ENV == 'development' ? 'cheap-inline-module-source-map' : false,
    resolve: {
        modules: ['node_modules'],
        extensions: ['', '.js', '.json']
    },
    resolveLoader: {
        modules: ['node_modules'],
        moduleExtensions: ['-loader'],
        extensions: ['', '.js', '.json']
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel'
            },
            {
                test:/\.less$/,
                loader: ExtractTextPlugin.extract('css!less')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].css', { allChunks: true }),
        new webpack.NoErrorsPlugin(),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'common',
        //     chunks: ['main', 'about']
        // }),
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV),
            LANG: JSON.stringify('ru')
        })
    ]
};

if(NODE_ENV == 'production') {
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: true,
                unsafe: true
            }
        })
    );
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question