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.

Tyler Liu · Accepted Answer · 2017-04-22T09:15:34.907

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
  ]
}

Seems like this is not possible when using mini-css-extract-plugin. Is there any alternative for mini-css-extract-plugin? — Jinto, Jan 08 '19 at 11:45
mini-css-extract-plugin works fine for me, as documented at https://webpack.js.org/loaders/sass-loader/#extracts-css-into-separate-files and https://www.robinwieruch.de/webpack-css/ — James McKinney, Aug 25 '22 at 21:54

score 5 · Answer 2 · edited May 23 '17 at 11:55

5

Unfortunately, that is currently not possible by design. webpack started as a JavaScript bundler which is capable of handling other "web modules", such as CSS and HTML. JavaScript is chosen as base language, because it can host all the other languages simply as strings. The extract-text-webpack-plugin is just extracting these strings as standalone file (thus the name).

You're probably better off with PostCSS which provides various plugins to post-process CSS effectively.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 21 '15 at 08:34

Johannes Ewald

17,665
5
44
39

Given this is not the selected answer, can somone confirm that this response is not true? – dhwang Mar 07 '23 at 18:17

score 4 · Answer 3 · answered Oct 21 '15 at 06:02

One solution is to execute webpack with the Node API and control the output with the memory-fs option. Just tell it to ignore the resulting js-file. Set the output.path to "/" in webpackConfig.

var compiler = webpack(webpackConfig);
var mfs = new MemoryFS();
compiler.outputFileSystem = mfs;
compiler.run(function(err, stats) {
    if(stats.hasErrors()) { throw(stats.toString()); }
    mfs.readdirSync("/").forEach(function (f) {
        if(f === ("app.js")) { return; } // ignore js-file
        fs.writeFileSync(destination + f, mfs.readFileSync("/" + f));
    })
});

score 3 · Answer 4 · answered Oct 09 '19 at 01:05

You can clean up your dist folder for any unwanted assets after the done is triggered. This can be easily achieved with the event-hooks-webpack-plugin

//
plugins: [
        new EventHooksPlugin({
            'done': () => {
                // delete unwanted assets 
            }
        })
    ]

Good Luck...

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

4 Answers4

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

In short:

A real example (webpack 2.x):

Linked