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

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.


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

MiniCssExtractPlugin, By default, mini-css-extract-plugin generates JS modules that use the This plugin should be used only on production builds without style-loader in the In the example below, we'll use moduleFilename to output the generated css into a​  Is there a way to exclude CSS in non-initial chunks and output them in separate file? bebraw added the question label Dec 15, 2015 Copy link Quote reply


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.

Output Management, Setup · Loading CSS · Loading Images · Loading Fonts · Loading Data export default function printMe() { console.log('I get called from print.js!') we'll change the output as well, so that it will dynamically generate bundle names, In general it's good practice to clean the /dist folder before each build, so that only used files  With that, Webpack compiles the ./blocks/editor.scss to the editor.blocks.css inside the assets/css directory and the ./blocks/frontend.scss to the assets/css/frontend.blocks.css. The postcss-loader runs Autoprefixer. To get that working, I created a postcss.config.js with the following content:


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));
    })
});

HtmlWebpackPlugin, You can either let the plugin generate an HTML file for you, supply your own template using Just add the plugin to your webpack configuration as follows: module.exports = { entry: 'index.js', output: { path: path.resolve(__dirname, '. If you have any CSS assets in webpack's output (for example, CSS extracted with the  Export only locals. Useful when you use css modules for pre-rendering (for example SSR). For pre-rendering with mini-css-extract-plugin you should use this option instead of style-loader!css-loader in the pre-rendering bundle. It doesn't embed CSS but only exports the identifier mappings. webpack.config.js


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...

css-loader - Webpack, The css-loader interprets @import and url() like import/require() and will resolve them. If there are SourceMaps, they will also be included in the result string. With :local (without brackets) local mode can be switched on for this selector. from your bundle being able to use parallel loading of CSS/JS resources later on. I also cannot make it work, whats happens for me is that I have multiple entries (multi real web pages SPA), and after any combination suggested here, I end up with unnecessary styles.js chunk, and, whats worse, without vendor and commons chunks which are generated otherwise.


Output, See output.filename option for details on the possible values. This option is only used when devtool uses an options which requires module names. The path used to resolve the file without any query params To make UMD build available on both browsers and Node.js, set output. or when loading an image in CSS: The default value of output.ecmaVersion in webpack 4 is 5. output.compareBeforeEmit. boolean = true. Tells webpack to check if to be emitted file already exists and has the same content before writing to the output file system. webpack will not write output file when file already exists on disk with the same content.


Separating CSS, Webpack provides a means to generate a separate CSS bundles using mini-css-​extract-plugin (MCEP). Given the plugin is used only for production, that is not a problem. It can be potentially dangerous to use inline styles within JavaScript in extractCSS = ({ include, exclude, use = [] }) => { // Output extracted CSS to a  mini-css-extract-plugin: Useful for splitting CSS out from the main application. bundle-loader: Used to split code and lazy load the resulting bundles. promise-loader: Similar to the bundle-loader but uses promises. Dynamic Imports. Two similar techniques are supported by webpack when it comes to dynamic code splitting.


Getting Started with CSS Modules, There isn't one single approach with CSS Modules to making the JavaScript templates, We'll be using Webpack, a build system and module bundler. Now we want to run Babel on all of our .js files but only the files that we write, any other moves every require('style.css') in entry chunks into a separate css output file. Don't output empty JS files having a style only entry (css/sass/less) generating an extra .js file, and ended up creating a webpack plugin to remove the js file