Concat and minify CSS files with Webpack without require them

Question

I've got and old part of an application that contains some CSS files that are concatenated and minified with gulp script.

And I've got a new application that bundled with Webpack.

Is it possible to assemble the old CSS with Webpack without any additional require calls? Just get all CSS from old_css/**/*.css, concat, minify and write to assets/old.css?

Answer 1

You can achieve this by "requiring" the CSS files through a separate entry. You'll end up with something like this:

{
    entry: {
        styles: glob('old_css/**/*.css'), // array of css files
        ...
    },
    output: {
        filename: '[name].[chunkhash].js',
        ...
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            ...
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].[chunkhash].css'),
        ...
    ],
    ...
}

You'll end up with a JavaScript file named after your style entry in addition to the CSS file. You can ignore that, though.