With Webpack, How to Generate CSS Only, Excluding The Output.Js

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

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

Can I use webpack to generate CSS and JS separately?

Should I even be using webpack for non-JS assets if I'm not going to mix them into my JS?

Maybe not. Webpack is definitely js-centric, with the implicit assumption that what you're building is a js application. Its implementation of require() allows you to treat everything as a module (including Sass/LESS partials, JSON, pretty much anything), and automatically does your dependency management for you (everything that you require is bundled, and nothing else).

why would I require LESS in my JS when it has nothing to do with my JS code?

People do this because they're defining a piece of their application (e.g. a React component, a Backbone View) with js. That piece of the application has CSS that goes with it. Depending on some external CSS resource that's built separately and not directly referenced from the js module is fragile, harder to work with, and can lead to styles getting out of date, etc. Webpack encourages you to keep everything modular, so you have a CSS (Sass, whatever) partial that goes with that js component, and the js component require()s it to make the dependency clear (to you and to the build tool, which never builds styles you don't need).

I don't know if you could use webpack to bundle CSS on its own (when the CSS files aren't referenced from any js). I'm sure you could wire something up with plugins, etc., but not sure it's possible out of the box. If you do reference the CSS files from your js, you can easily bundle the CSS into a separate file with the Extract Text plugin, as you say.

Webpack 2: exclude css entry from result

Webpack seems to always need a source code file to bring in external styles, either CSS or Sass - I don't think there's anyway to get around that. If you just want those compiled css style files to import into your app and don't want to have an associated .js file, then just use node-sass compiler and build a .css file. Then either use the webpack css loader to bring that into your app via webpack or you can manually reference it in your html file.

Otherwise just have a js file with a single import of the Sass styles then delete the it after the build. You will get the same css either way.

Exclude some css files in webpack

So you want vendor prefixes don't add on Webpack generated vendor.css file.

Remember Webpack parse loader array on reverse order. You could add exclude property on the object of postcss-loader with the regular expression.

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FileManagerPlugin = require('filemanager-webpack-plugin');
module.exports = function() {
    return ({
        entry: {
            'vendor': './src/js/vendor.js',
            'app': './src/js/app.js',
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].[chunkhash].js'
        },
        module: {
            rules: [{
                    test: /\.js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },// Take scss file and split into a separate css file
                },
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'css-loader',
                    },// Interprets scss @import and url() like import/require()
                },
                {
                    test: /\.s(c|a)ss$/,
                    exclude: [/vendor/],
                    use: {
                        loader: 'postcss-loader',
                    },
                }, // PostCSS turns your SCSS file into a JS object & converts that object back to a SCSS file
                {
                    test: /\.s(c|a)ss$/,
                    use: {
                        loader: 'sass-loader',
                    },// look for scss file through sass-loader, compile scss into css code
                },
            ]
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: 'css/[name].[contenthash].css'
            }),
            // Before Build
            new FileManagerPlugin({
                onStart: {
                    delete: [
                        'dist',
                    ],
                }
            }),
        ]
    });
};

---

Related Topics