With Webpack, is it possible to generate CSS only, excluding the output.js?

Question

I'm using Webpack with the extract-text-webpack-plugin.

In my project, I have some build scripts. One of the build scripts is supposed to bundle and minify CSS only. As I'm using Webpack for the other scripts, I found it a good idea to use Webpack even when I only want to bundle and minify CSS.

It's working fine, except that I can't get rid of the output.js file. I don't want the resulting webpack output file. I just want the CSS for this particular script.

Is there a way to get rid of the resulting JS? If not, do you suggest any other tool specific for handling CSS? Thanks.

Answer 1

There is an easy way, no extra tool is required.

There is an easy way and you don't need extra libraries except which you are already using: webpack with the extract-text-webpack-plugin.

In short:

Make the output js and css file have identical name, then the css file will override js file.

A real example (webpack 2.x):

import path from 'path' import ExtractTextPlugin from 'extract-text-webpack-plugin'  const config = {   target: 'web',   entry: {     'one': './src/one.css',     'two': './src/two.css'   },   output: {     path: path.join(__dirname, './dist/'),     filename: '[name].css' // output js file name is identical to css file name   },   module: {     rules: [       {         test: /\.css$/,         use: ExtractTextPlugin.extract({           fallback: 'style-loader',           use: 'css-loader'         })       }     ]   },   plugins: [     new ExtractTextPlugin('[name].css') // css file will override generated js file   ] }